apache · devabhishekpal · Jan 28, 2026 · Jan 28, 2026
diff --git a/hadoop-ui/.gitignore b/hadoop-ui/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+build
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/hadoop-ui/README.md b/hadoop-ui/README.md
@@ -0,0 +1,98 @@
+# Hadoop UI Monorepo
+
+This monorepo contains three React applications for Apache Ozone HDDS UI components:
+
+## Applications
+
+- **Recon** - Data node management and monitoring
+- **SCM** - Storage Container Manager interface  
+- **OM** - Ozone Manager interface
+
+## Structure
+
+```
+hadoop-ui/src/
+├── packages/
+│   ├── shared/           # Shared components and utilities
+│   ├── recon/           # Recon application
+│   ├── scm/             # SCM application
+│   └── om/              # OM application
+├── package.json         # Root package.json with workspace configuration
+└── pnpm-workspace.yaml  # PNPM workspace configuration
+```
+
+## Development
+
+### Prerequisites
+
+- Node.js >= 20.0.0 (Node 20 LTS recommended)
+- PNPM >= 8.0.0
+
+### Installation
+
+```bash
+# Install all dependencies
+pnpm install
+```
+
+### Development
+
+```bash
+# Start development server for a specific app
+pnpm dev:recon
+pnpm dev:scm
+pnpm dev:om
+
+# Build shared components (run this first if you make changes to shared)
+pnpm build:shared
+```
+
+### Building
+
+```bash
+# Build all applications
+pnpm build
+
+# Build specific application
+pnpm build:recon
+pnpm build:scm
+pnpm build:om
+
+# Build only shared components
+pnpm build:shared
+```
+
+Build outputs are placed in:
+- `build/recon/` - Recon application build
+- `build/scm/` - SCM application build  
+- `build/om/` - OM application build
+
+### Clean
+
+```bash
+# Clean all build artifacts and node_modules
+pnpm clean
+```
+
+## Architecture
+
+### Shared Components
+
+The `@hadoop-ui/shared` package contains:
+
+- **Components**: Reusable React components (e.g., Sidebar)
+- **Utils**: Shared utility functions (e.g., menu utilities)
+- **Types**: TypeScript type definitions
+
+### Individual Applications
+
+Each application (`recon`, `scm`, `om`) is a standalone Vite + React + TypeScript application that can import from the shared package.
+
+## Technology Stack
+
+- **Build Tool**: Vite
+- **Framework**: React 18
+- **Language**: TypeScript
+- **UI Library**: Ant Design v5
+- **Package Manager**: PNPM (with workspaces)
+- **Monorepo**: PNPM Workspaces 
diff --git a/hadoop-ui/src/.prettierignore b/hadoop-ui/src/.prettierignore
@@ -0,0 +1,4 @@
+dist
+build
+node_modules
+pnpm-lock.yaml
diff --git a/hadoop-ui/src/.prettierrc.json b/hadoop-ui/src/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": true,
+  "tabWidth": 2,
+  "endOfLine": "lf"
+}
diff --git a/hadoop-ui/src/eslint.config.js b/hadoop-ui/src/eslint.config.js
@@ -0,0 +1,44 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import prettier from 'eslint-plugin-prettier';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist', 'build', 'node_modules'] },
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      react.configs.recommended,
+      react.configs['jsx-runtime'],
+      jsxA11y.configs.recommended,
+      eslintConfigPrettier,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'jsx-a11y': jsxA11y,
+      prettier,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react/prop-types': 'off',
+      'react/react-in-jsx-scope': 'off',
+      'prettier/prettier': 'warn',
+    },
+  }
+);
diff --git a/hadoop-ui/src/package.json b/hadoop-ui/src/package.json
@@ -0,0 +1,71 @@
+{
+  "packageManager": "pnpm@8.15.7",
+  "name": "hadoop-ui",
+  "version": "1.0.0",
+  "description": "The home of HDDS UI code.",
+  "scripts": {
+    "build": "pnpm run build:shared && pnpm run build:all",
+    "build:shared": "pnpm --filter @hadoop-ui/shared run build",
+    "build:all": "pnpm --filter @hadoop-ui/ozone-recon --filter @hadoop-ui/ozone-scm --filter @hadoop-ui/ozone-om run build",
+    "build:recon": "pnpm --filter @hadoop-ui/ozone-recon run build",
+    "build:scm": "pnpm --filter @hadoop-ui/ozone-scm run build", 
+    "build:om": "pnpm --filter @hadoop-ui/ozone-om run build",
+    "dev:recon": "pnpm --filter @hadoop-ui/ozone-recon run dev",
+    "dev:scm": "pnpm --filter @hadoop-ui/ozone-scm run dev",
+    "dev:om": "pnpm --filter @hadoop-ui/ozone-om run dev",
+    "clean": "rm -rf build && pnpm -r exec rm -rf dist node_modules",
+    "clean:cache": "rm -rf node_modules/.vite && pnpm -r exec rm -rf node_modules/.vite",
+    "clean:all": "pnpm run clean && pnpm run clean:cache",
+    "install:all": "pnpm install",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@ant-design/icons": "^5.6.1",
+    "@fontsource/roboto": "^4.5.8",
+    "antd": "^5.24.3",
+    "axios": "^1.9.0",
+    "less": "^4.2.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.8",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "8.26.0",
+    "@typescript-eslint/parser": "8.26.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.12.2",
+    "eslint-config-prettier": "8.10.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "prettier": "^2.8.4",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "8.26.0",
+    "vite": "^5.4.10",
+    "vite-tsconfig-paths": "^3.6.0",
+    "vitest": "^1.6.1"
+  },
+  "engines": {
+    "node": ">=20.0.0",
+    "pnpm": ">=8.15.7"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 5 chrome version",
+      "last 5 firefox version",
+      "last 5 safari version"
+    ]
+  }
+}
diff --git a/hadoop-ui/src/packages/om/index.html b/hadoop-ui/src/packages/om/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ozone OM</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html> 
diff --git a/hadoop-ui/src/packages/om/package.json b/hadoop-ui/src/packages/om/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@hadoop-ui/ozone-om",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3000",
+    "build": "vite build",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@hadoop-ui/shared": "workspace:*",
+    "@ant-design/icons": "^5.6.1",
+    "@fontsource/roboto": "^4.5.8",
+    "ag-charts-community": "^7.3.0",
+    "ag-charts-react": "^7.3.0",
+    "antd": "^5.24.3",
+    "axios": "^1.9.0",
+    "classnames": "^2.3.2",
+    "echarts": "^5.5.0",
+    "filesize": "^6.4.0",
+    "less": "^4.2.2",
+    "moment": "^2.29.4",
+    "pretty-ms": "^5.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.3.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^20.14.8",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "8.26.0",
+    "@typescript-eslint/parser": "8.26.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.12.2",
+    "eslint-config-prettier": "8.10.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "jsdom": "^24.1.1",
+    "json-server": "^0.15.1",
+    "msw": "1.3.3",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.4",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10",
+    "vitest": "^1.6.1"
+  }
+} 
diff --git a/hadoop-ui/src/packages/om/src/App.css b/hadoop-ui/src/packages/om/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+} 
diff --git a/hadoop-ui/src/packages/om/src/App.tsx b/hadoop-ui/src/packages/om/src/App.tsx
@@ -0,0 +1,26 @@
+import { useState } from 'react'
+import { Button } from 'antd'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="App">
+      <h1>Ozone OM</h1>
+      <div className="card">
+        <Button type="primary" onClick={() => setCount((count) => count + 1)}>
+          Count is {count}
+        </Button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </div>
+  )
+}
+
+export default App