HDDS-14519. Setup hadoop-ui module for common UI code

hadoop-ozone/dev-support/checks/checkstyle.sh

@@ -23,6 +23,7 @@ BASE_DIR="$(pwd -P)"
 REPORT_DIR=${OUTPUT_DIR:-"$DIR/../../../target/checkstyle"}
 mkdir -p "$REPORT_DIR"
 REPORT_FILE="$REPORT_DIR/summary.txt"
+UI_REPORT_FILE="$REPORT_DIR/ui-summary.txt"
 
 MAVEN_OPTIONS='-B -fae -DskipDocs -DskipRecon -Dcheckstyle.failOnViolation=false --no-transfer-progress'
 
@@ -38,6 +39,16 @@ fi
 
 cat "${REPORT_DIR}/output.log"
 
+# Run eslint for ozone-ui and capture unix-style violations
+if [[ -d "${BASE_DIR}/ozone-ui/src" ]]; then
+  (
+    cd "${BASE_DIR}/ozone-ui/src" || exit 1
+    pnpm run lint
+  ) > "$UI_REPORT_FILE" 2>&1
+else
+  echo "ozone-ui/src not found. Skipping UI lint." > "$UI_REPORT_FILE"
+fi
+
 #Print out the exact violations with parsing XML results with sed
 find "." -name checkstyle-errors.xml -print0 \
   | xargs -0 sed '$!N; /<file.*\n<\/file/d;P;D' \

ozone-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?

ozone-ui/README.md

@@ -0,0 +1,115 @@
+<!---
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+# 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 

ozone-ui/src/.prettierignore

@@ -0,0 +1,19 @@
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+dist
+build
+node_modules
+pnpm-lock.yaml

ozone-ui/src/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": true,
+  "tabWidth": 2,
+  "endOfLine": "lf"
+}

ozone-ui/src/eslint.config.js

@@ -0,0 +1,139 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* eslint-disable @typescript-eslint/no-require-imports */
+const { FlatCompat } = require('@eslint/eslintrc');
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+module.exports = [
+  {
+    ignores: ['dist', 'build', 'node_modules'],
+  },
+  ...compat.config({
+    env: {
+      browser: true,
+      node: true,
+      es2020: true,
+    },
+    extends: [
+      'plugin:prettier/recommended',
+      'plugin:react/recommended',
+      'plugin:jsx-a11y/recommended',
+      'plugin:@typescript-eslint/recommended',
+    ],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+    plugins: ['jsx-a11y', 'react-hooks'],
+    rules: {
+      'no-duplicate-imports': 'warn',
+      'new-cap': 0,
+      'no-console': 0,
+      'no-extra-boolean-cast': 0,
+      'no-invalid-this': 0,
+      'no-lonely-if': 2,
+      'no-throw-literal': 0,
+      'no-unused-vars': 0,
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          args: 'after-used',
+          varsIgnorePattern: '^_',
+          argsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+      'no-useless-constructor': 2,
+      'no-var': 1,
+      'no-undef': 2,
+      'one-var': 0,
+      'prefer-arrow-callback': 2,
+      'prefer-const': ['warn', { destructuring: 'all' }],
+      'require-jsdoc': 0,
+      strict: 0,
+      'valid-jsdoc': 0,
+      'eol-last': ['error', 'always'],
+      'react/display-name': 0,
+      curly: [2, 'all'],
+      'jsx-a11y/no-autofocus': 0,
+      'jsx-a11y/label-has-associated-control': [
+        1,
+        {
+          labelComponents: ['label'],
+          labelAttributes: ['htmlFor'],
+          controlComponents: ['input'],
+          assert: 'both',
+        },
+      ],
+      'jsx-a11y/anchor-is-valid': 1,
+      'jsx-a11y/anchor-has-content': 1,
+      'jsx-a11y/click-events-have-key-events': 1,
+      'jsx-a11y/no-noninteractive-element-interactions': 1,
+      'jsx-a11y/interactive-supports-focus': 1,
+      'jsx-a11y/no-static-element-interactions': 1,
+      'jsx-a11y/media-has-caption': 1,
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'error',
+      'react/jsx-no-useless-fragment': [
+        'warn',
+        {
+          // TS complains if we return a string from a component unless we wrap it
+          // in a fragment, so we should allow that case
+          allowExpressions: true,
+        },
+      ],
+      'react/react-in-jsx-scope': 'off',
+      '@typescript-eslint/indent': 0,
+      '@typescript-eslint/explicit-function-return-type': 0,
+      '@typescript-eslint/no-use-before-define': 0,
+      '@typescript-eslint/no-explicit-any': 0,
+      '@typescript-eslint/explicit-member-accessibility': 0,
+      '@typescript-eslint/no-non-null-assertion': 0,
+      '@typescript-eslint/no-empty-interface': 0,
+      '@typescript-eslint/camelcase': 0,
+      '@typescript-eslint/no-var-requires': 0,
+      '@typescript-eslint/no-empty-function': 0,
+      '@typescript-eslint/ban-ts-ignore': 0,
+      '@typescript-eslint/no-this-alias': 0,
+    },
+    settings: {
+      react: '18.3.1',
+    },
+    overrides: [
+      {
+        files: ['*.ts', '*.tsx', '*.cts', '*.mts'],
+        rules: {
+          // this is handled by TS instead, otherwise we'll get a lot of false
+          // positives.
+          // See: https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md no-undef section
+          'no-undef': 'off',
+          // prop types only really useful in non TS code
+          'react/prop-types': 'off',
+        },
+      },
+    ],
+  }),
+];