feat(webui/cluster): redesign cluster page

[Jitmisra]

i have redesigned the cluster page
added tags
🟠 Orange "Migrating {slot}"= Shows when any shard has active migration (migrating_slot >= 0)
🟢 Green "Stable" = Shows when all shardds are stable(migrating_slot = -1)
🔵 Blue"Importing {slot}" == Shows when any shard is importing(import_slot >= 0)

let me know if there is something else i can do

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 46.89%. Comparing base (6c56470) to head (c29d639).
Report is 68 commits behind head on unstable.

Additional details and impacted files

@@             Coverage Diff              @@
##           unstable     #322      +/-   ##
============================================
+ Coverage     43.38%   46.89%   +3.50%     
============================================
  Files            37       45       +8     
  Lines          2971     4391    +1420     
============================================
+ Hits           1289     2059     +770     
- Misses         1544     2126     +582     
- Partials        138      206      +68     

Flag	Coverage Δ
unittests	46.89% <ø> (+3.50%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull Request Overview

Redesign the cluster page to improve UX by adding new tags, filters, and enhanced sorting while also updating form dialog components. Key changes include:

• Adding an optional children prop to the FormDialog and form creation components.
• Updating typography variants and styling to match the new design.
• Refactoring the cluster page to include new filter and sort popovers and detailed resource counts.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
webui/src/app/ui/formDialog.tsx	Added support for an optional children prop and updated typography styling.
webui/src/app/ui/formCreation.tsx	Updated ClusterCreation and ImportCluster components to accept children and wrap FormDialog accordingly.
webui/src/app/namespaces/[namespace]/page.tsx	Overhauled the UI with new Material UI components, filters, sorting popovers, and tag displays.

[Copilot]

The clickable div wrapping the children does not have inherent keyboard accessibility. Consider using a button element or adding tabindex and key press handlers to ensure the element is accessible.

Suggested change

	<div onClick={openDialog}>{children}</div>
	<button type="button" onClick={openDialog} style={{ all: "unset", cursor: "pointer" }}>
	{children}
	</button>

[Copilot]

The import 'listShards' is not used anywhere in the file. Removing unused imports can improve code maintainability.

[Copilot]

The sequential fetching of nodes for each shard using a for-loop with await may be a performance bottleneck. Consider refactoring this loop using Promise.all to execute the node fetches concurrently.

Suggested change

	for (let i = 0; i < shards.length; i++) {
	try {
	const nodes = await listNodes(
	params.namespace,
	cluster,
	i.toString()
	);
	if (Array.isArray(nodes)) {
	clusterNodeCount += nodes.length;
	}
	} catch (error) {
	console.error(
	`Failed to fetch nodes for shard ${i}:`,
	error
	);
	}
	}
	const shardNodeCounts = await Promise.all(
	shards.map(async (_, i) => {
	try {
	const nodes = await listNodes(
	params.namespace,
	cluster,
	i.toString()
	);
	return Array.isArray(nodes) ? nodes.length : 0;
	} catch (error) {
	console.error(
	`Failed to fetch nodes for shard ${i}:`,
	error
	);
	return 0;
	}
	})
	);
	const clusterNodeCount = shardNodeCounts.reduce(
	(sum, count) => sum + count,
	0
	);

[PragmaTwice]

Thank you for your contribution! Sorry for the late merge.

[Jitmisra]

Thank you for your contribution! Sorry for the late merge.

No worries at all , thank you for merging.