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

@@ -171,6 +171,29 @@ jobs:
     strategy:
       matrix:
         check: ${{ fromJson(needs.build-info.outputs.basic-checks) }}
+        exclude:
+          - check: checkstyle
+      fail-fast: false
+
+  checkstyle:
+    needs:
+      - build-info
+    if: needs.build-info.outputs.needs-basic-check == 'true' && contains(needs.build-info.outputs.basic-checks, 'checkstyle')
+    uses: ./.github/workflows/check.yml
+    with:
+      java-version: ${{ matrix.part == 'java' && '8' || '' }}
+      needs-maven-cache: ${{ matrix.part == 'java' }}
+      needs-npm-cache: ${{ matrix.part == 'ui' }}
+      ratis-args: ${{ inputs.ratis_args }}
+      script: checkstyle
+      script-args: ${{ matrix.part }}
+      sha: ${{ needs.build-info.outputs.sha }}
+      split: ${{ matrix.part }}
+      timeout-minutes: 30
+    secrets: inherit
+    strategy:
+      matrix:
+        part: [ java, ui ]
       fail-fast: false
 
   dependency:

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

@@ -23,38 +23,101 @@ 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'
 
+MODE="${1:-java}"
+
 declare -i rc
-mvn ${MAVEN_OPTIONS} checkstyle:check > "${REPORT_DIR}/output.log"
-rc=$?
-if [[ ${rc} -ne 0 ]]; then
-  mvn ${MAVEN_OPTIONS} clean test-compile checkstyle:check > output.log
-  rc=$?
-  mkdir -p "$REPORT_DIR" # removed by mvn clean
-  mv output.log "${REPORT_DIR}"/
-fi
-
-cat "${REPORT_DIR}/output.log"
-
-#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' \
-  | sed \
-      -e '/<?xml.*>/d' \
-      -e '/<checkstyle.*/d' \
-      -e '/<\/.*/d' \
-      -e 's/<file name="\([^"]*\)".*/\1/' \
-      -e 's/<error.*line="\([[:digit:]]*\)".*message="\([^"]*\)".*/ \1: \2/' \
-      -e "s!^${BASE_DIR}/!!" \
-      -e "s/&apos;/'/g" \
-      -e "s/&lt;/</g" \
-      -e "s/&gt;/>/g" \
-  | tee "$REPORT_FILE"
-
-## generate counter
-grep -c ':' "$REPORT_FILE" > "$REPORT_DIR/failures"
-
-ERROR_PATTERN="\[ERROR\]"
-source "${DIR}/_post_process.sh"
+declare -i java_rc
+declare -i ui_rc
+
+run_java_checkstyle() {
+  mvn ${MAVEN_OPTIONS} checkstyle:check > "${REPORT_DIR}/output.log"
+  java_rc=$?
+  if [[ ${java_rc} -ne 0 ]]; then
+    mvn ${MAVEN_OPTIONS} clean test-compile checkstyle:check > output.log
+    java_rc=$?
+    mkdir -p "$REPORT_DIR" # removed by mvn clean
+    mv output.log "${REPORT_DIR}"/
+  fi
+
+  cat "${REPORT_DIR}/output.log"
+
+  # Print out the exact violations by parsing XML results with sed
+  find "." -name checkstyle-errors.xml -print0 \
+    | xargs -0 sed '$!N; /<file.*\n<\/file/d;P;D' \
+    | sed \
+        -e '/<?xml.*>/d' \
+        -e '/<checkstyle.*/d' \
+        -e '/<\/.*/d' \
+        -e 's/<file name="\([^"]*\)".*/\1/' \
+        -e 's/<error.*line="\([[:digit:]]*\)".*message="\([^"]*\)".*/ \1: \2/' \
+        -e "s!^${BASE_DIR}/!!" \
+        -e "s/&apos;/'/g" \
+        -e "s/&lt;/</g" \
+        -e "s/&gt;/>/g" \
+    | tee "$REPORT_FILE"
+}
+
+run_ui_lint() {
+  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}/ui-output.log" 2>&1
+    ui_rc=$?
+
+    # Show the lint output
+    cat "${REPORT_DIR}/ui-output.log"
+
+    if [[ ${ui_rc} -ne 0 ]]; then
+      # Parse and save lint errors to report file
+      cat "${REPORT_DIR}/ui-output.log" | tee "$REPORT_FILE"
+      if [[ ! -s "$REPORT_FILE" ]]; then
+        echo "UI lint failed. See ${REPORT_DIR}/ui-output.log for details." > "$REPORT_FILE"
+      fi
+    else
+      # No errors, create empty report file
+      touch "$REPORT_FILE"
+    fi
+  else
+    ui_rc=0
+    echo "ozone-ui/src not found. Skipping UI lint." | tee "$REPORT_FILE"
+  fi
+}
+
+case "${MODE}" in
+  java)
+    run_java_checkstyle
+    rc=${java_rc}
+
+    ## generate counter
+    grep -c ':' "$REPORT_FILE" > "$REPORT_DIR/failures"
+
+    ERROR_PATTERN="\[ERROR\]"
+    source "${DIR}/_post_process.sh"
+    ;;
+  ui)
+    run_ui_lint
+
+    # Generate failure counter
+    if [[ -s "$REPORT_FILE" ]]; then
+      wc -l "$REPORT_FILE" | awk '{ print $1 }' > "$REPORT_DIR/failures"
+    else
+      echo "0" > "$REPORT_DIR/failures"
+    fi
+
+    # Exit with the actual lint exit code
+    exit ${ui_rc}
+    ;;
+  *)
+    echo "Unknown mode: ${MODE}. Expected java, ui, or all."
+    exit 2
+    ;;
+esac

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"
+}