feat(FR-1691): migrate project table to the webui

[nowgnuesLee]

resolves #4659 (FR-1691)

This PR adds a new Project page to the UI and introduces several reusable components for displaying resource information:

• Creates a new BAIResourceNumberWithIcon component to display resource values with appropriate icons
• Adds BAIProjectTable component for displaying project information
• Implements device-specific icons for various accelerators (NVIDIA, ROCm, TPU, IPU, Gaudi, Furiosa, Rebel)
• Moves NumberWithUnit and AllowedVfolderHostsWithPermission components to the UI package
• Adds a BAIMetaDataProvider to share device metadata across components
• Adds translations for the new components across all supported languages
• Implements the Project page with filtering and sorting capabilities

The PR also enhances the table component to support column groups and improves resource display with appropriate icons based on resource type.

The test cases in BAIDomainSelect.test.ts will fail. We need to configure Babel, but we’ll address that later in a different issue.

The BAIAllowedVfolderHostsWithPermission component needs updates to its icons and functionality. Please recommend some icons.

mutations features are implemented in another issue.

[nowgnuesLee]

• feat(FR-1731): implement mutation functionality for the project table #4764
• feat(FR-1691): migrate project table to the webui #4698 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• flow:merge-queue - adds this PR to the back of the merge queue
• flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has required the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

Coverage report for ./packages/backend.ai-ui

St.❔	Category	Percentage	Covered / Total
🔴	Statements	54.79%	166/303
🔴	Branches	32.75%	93/284
🔴	Functions	42.47%	31/73
🔴	Lines	56.82%	150/264

Test suite run success

62 tests passing in 4 suites.

Report generated by 🧪jest coverage report action from 0c32cd1

[github-actions]

Coverage report for ./react

St.❔	Category	Percentage	Covered / Total
🔴	Statements	4.37% (-0% 🔻)	517/11825
🔴	Branches	3.59% (-0% 🔻)	298/8304
🔴	Functions	2.63% (-0% 🔻)	95/3618
🔴	Lines	4.35% (-0% 🔻)	503/11565

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🔴	... / ProjectPage.tsx	0%	0%	0%	0%

Test suite run success

145 tests passing in 14 suites.

Report generated by 🧪jest coverage report action from 7303812

[Copilot]

Pull request overview

This PR migrates the project table functionality to the React-based WebUI and introduces reusable components for displaying resource information with appropriate device icons. The changes include a new Project page with filtering and sorting capabilities, device-specific icon components (NVIDIA, ROCm, TPU, IPU, Gaudi, Furiosa, Rebel), and refactored components moved to the UI package for better reusability.

Key changes:

• New BAIProjectTable component with GraphQL/Relay integration for displaying project data
• BAIResourceNumberWithIcon component for unified resource display with device-specific icons
• BAIMetaDataProvider context for sharing device metadata across components
• Complete i18n support across all supported languages (21 languages)

Reviewed changes

Copilot reviewed 72 out of 79 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
react/src/pages/ProjectPage.tsx	New Project page with filtering, sorting, and pagination
packages/backend.ai-ui/src/components/BAIResourceNumberWithIcon.tsx	Resource display component with device-specific icons
packages/backend.ai-ui/src/components/fragments/BAIProjectTable.tsx	Main project table component with GraphQL fragments
packages/backend.ai-ui/src/components/provider/BAIMetaDataProvider/*	Context provider for device metadata
packages/backend.ai-ui/src/icons/*	Device-specific icon components (TPU, ROCm, Rebel, IPU, Gaudi, Furiosa)
resources/i18n/*.json	Translation additions for 21 languages
react/src/components/DefaultProviders.tsx	Integration of BAIMetaDataProvider wrapper
packages/backend.ai-ui/src/components/fragments/BAIAllowedVfolderHostsWithPermission.tsx	Refactored component supporting both KeyPair and Group fragments

[agatha197]

1. reposition the control columns next to the name column
2. if clicking the storage node, go to the storage detail page instead of permission
3. for permissions, display with another way like right side of icon.

[nowgnuesLee]

1. reposition the control columns next to the name column
2. if clicking the storage node, go to the storage detail page instead of permission
3. for permissions, display with another way like right side of icon.

1. I resolve the first issue in another issue feat(FR-1731): implement mutation functionality for the project table #4764. sorry.
   2, 3. I've been thinking about the icon. If you could review the other parts first, I can address this issue later or resolve it in a separate issue
   @agatha197