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

.github/workflows/check.yml

@@ -172,6 +172,12 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-
 
+      - name: Setup Node.js and pnpm
+        if: ${{ inputs.needs-npm-cache }}
+        run: |
+          corepack enable
+          corepack prepare pnpm@8.15.7 --activate
+
       - name: Cache for Maven dependencies
         if: ${{ inputs.needs-maven-cache }}
         uses: actions/cache/restore@v4

.github/workflows/ci.yml

@@ -50,6 +50,7 @@ jobs:
       needs-compose-tests: ${{ steps.selective-checks.outputs.needs-compose-tests }}
       needs-integration-tests: ${{ steps.selective-checks.outputs.needs-integration-tests }}
       needs-kubernetes-tests: ${{ steps.selective-checks.outputs.needs-kubernetes-tests }}
+      needs-ui-lint: ${{ steps.selective-checks.outputs.needs-ui-lint }}
       sha: ${{ steps.get-sha.outputs.sha }}
       # `env` context cannot be used when calling reusable workflow, so we need to convert these to `outputs`
       build-args: ${{ env.BUILD_ARGS }}
@@ -173,6 +174,18 @@ jobs:
         check: ${{ fromJson(needs.build-info.outputs.basic-checks) }}
       fail-fast: false
 
+  eslint:
+    needs:
+      - build-info
+    if: needs.build-info.outputs.needs-ui-lint == 'true'
+    uses: ./.github/workflows/check.yml
+    with:
+      needs-npm-cache: true
+      script: lint
+      sha: ${{ needs.build-info.outputs.sha }}
+      timeout-minutes: 15
+    secrets: inherit
+
   dependency:
     needs:
       - build-info

dev-support/ci/selective_ci_checks.sh

@@ -89,6 +89,7 @@ function set_outputs_run_everything_and_exit() {
     compose_tests_needed=true
     integration_tests_needed=true
     kubernetes_tests_needed=true
+    ui_lint_needed=true
 
     start_end::group_end
     set_outputs
@@ -167,6 +168,7 @@ SOURCES_TRIGGERING_TESTS=(
     "^dev-support"
     "^hadoop-hdds"
     "^hadoop-ozone"
+    "^ozone-ui"
     "^pom.xml"
 )
 readonly SOURCES_TRIGGERING_TESTS
@@ -441,6 +443,23 @@ function check_needs_pmd() {
     start_end::group_end
 }
 
+function check_needs_ui_lint() {
+    start_end::group_start "Check if UI lint is needed"
+    local pattern_array=(
+        "^hadoop-ozone/dev-support/checks/lint.sh"
+        "^ozone-ui"
+        "\\.tsx?$"
+        "\\.jsx?$"
+    )
+    filter_changed_files true
+
+    if [[ ${match_count} != "0" ]]; then
+        ui_lint_needed=true
+    fi
+
+    start_end::group_end
+}
+
 # Counts other files which do not need to trigger any functional test
 # (i.e. no compose/integration/kubernetes)
 function get_count_misc_files() {
@@ -532,6 +551,7 @@ function set_outputs() {
     initialization::ga_output needs-compose-tests "${compose_tests_needed}"
     initialization::ga_output needs-integration-tests "${integration_tests_needed}"
     initialization::ga_output needs-kubernetes-tests "${kubernetes_tests_needed}"
+    initialization::ga_output needs-ui-lint "${ui_lint_needed:-false}"
 }
 
 check_for_full_tests_needed_label
@@ -567,6 +587,7 @@ get_count_misc_files
 
 check_needs_build
 check_needs_compile
+check_needs_ui_lint
 
 # calculate basic checks to run
 BASIC_CHECKS="rat"

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

@@ -0,0 +1,64 @@
+#!/usr/bin/env bash
+# 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.
+
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
+cd "$DIR/../../.." || exit 1
+
+BASE_DIR="$(pwd -P)"
+REPORT_DIR=${OUTPUT_DIR:-"$DIR/../../../target/lint"}
+mkdir -p "$REPORT_DIR"
+REPORT_FILE="$REPORT_DIR/summary.txt"
+
+declare -i rc
+
+if [[ -d "${BASE_DIR}/ozone-ui/src" ]]; then
+  (
+    cd "${BASE_DIR}/ozone-ui/src" || exit 1
+    # Install dependencies if node_modules doesn't exist
+    if [[ ! -d "node_modules" ]]; then
+      pnpm install --frozen-lockfile
+    fi
+    pnpm run lint
+  ) > "${REPORT_DIR}/output.log" 2>&1
+  rc=$?
+
+  cat "${REPORT_DIR}/output.log"
+
+  # Parse lint output to report file
+  # ::: Sample output :::
+  # /path/to/file.ts
+  # 63:38  error  Insert `,`                          prettier/prettier
+  # 64:6   error  Insert `,`                          prettier/prettier
+  if [[ ${rc} -ne 0 ]]; then
+    awk -v base_dir="${BASE_DIR}/" '
+      /^\/.*\.(ts|tsx|js|jsx)$/ { 
+        filename = $0
+        sub("^" base_dir, "", filename)
+        next
+      }
+      /^[[:space:]]+[0-9]+:[0-9]+[[:space:]]+(error|warning)/ {
+        print filename
+        print $0
+      }
+    ' "${REPORT_DIR}/output.log" > "$REPORT_FILE" || true
+  fi
+else
+  rc=0
+  echo "ozone-ui/src not found. Skipping UI lint."
+fi
+
+ERROR_PATTERN="error"
+source "${DIR}/_post_process.sh"

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.
+-->
+
+# Ozone UI Monorepo
+
+This monorepo contains three React applications for Apache Ozone 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/.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

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