Redesigned webpage

[Jitmisra]

Redesigned webpage

#273

default.mov

Since I have completely redesigned it there might be some minor bugs. Please feel free to point them out and I will fix them.

[PragmaTwice]

Would you like to rebase your branch and solve these git conflicts?

[git-hulk]

The new UI looks great.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 46.34%. Comparing base (6c56470) to head (03ce2da).
Report is 49 commits behind head on unstable.

Additional details and impacted files

@@             Coverage Diff              @@
##           unstable     #281      +/-   ##
============================================
+ Coverage     43.38%   46.34%   +2.95%     
============================================
  Files            37       45       +8     
  Lines          2971     4296    +1325     
============================================
+ Hits           1289     1991     +702     
- Misses         1544     2097     +553     
- Partials        138      208      +70     

Flag	Coverage Δ
unittests	46.34% <ø> (+2.95%)	⬆️

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.

[Jitmisra]

Would you like to rebase your branch and solve these git conflicts?

I have resolved it directly should I rebase?

[Jitmisra]

The new UI looks great.

thank you sir

[git-hulk]

@Jitmisra No need to rebase.

[Copilot]

Pull Request Overview

A comprehensive redesign of the Kvrocks Controller UI with enhanced theming, improved navigation, and updated resource cards for a modern and responsive user interface.

• Introduces dark mode support via a new ThemeProvider and tailwind configuration.
• Revamps major components such as Banner, Sidebar, NavLinks, and resource cards to improve layout and user experience.
• Updates utility functions and form dialogs with new behaviors and improved styling.

Reviewed Changes

Copilot reviewed 19 out of 20 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
webui/src/app/theme-provider.tsx	Implements dark mode management with a new ThemeProvider.
webui/src/app/ui/banner.tsx	Enhances navigation with breadcrumbs and theme toggle support.
webui/src/app/ui/createCard.tsx	Updates resource and creation cards with a refreshed design.
webui/src/app/ui/sidebar*.tsx	Redesigns sidebar components for namespaces, clusters, shards, and nodes.
webui/src/app/page.tsx & related pages	Revamps the landing and detail pages for a modern look and improved responsiveness.
webui/src/app/layout.tsx	Integrates ThemeProvider and overall global styling updates.

Files not reviewed (1)

• webui/src/app/globals.css: Language not supported

Comments suppressed due to low confidence (2)

webui/src/app/ui/sidebarItem.tsx:181

• Relying on a tab character to split the item's display name may lead to incorrect formatting if the item contains multiple or unexpected tab delimiters. Consider implementing a more robust parsing strategy or adding validation to ensure the expected format.

const displayName = item.includes("\t") ? item.split("\t")[0] + " " + item.split("\t")[1] : item;

webui/src/app/utils.ts:23

• Ensure that the new formatSlotRanges function is covered by unit tests, particularly for edge cases such as empty arrays, arrays with exactly two elements, and arrays with more than two elements.

export const formatSlotRanges = (ranges: string[]): string => { ... }

[git-hulk]

@Jitmisra I got the following error while clicking the namespaces button:

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/app/namespaces/page.tsx
 ⨯ ./src/app/ui/createCard.tsx:31:0
Module not found: Can't resolve '@fortawesome/free-solid-svg-icons'
  29 |     ShardCreation,
  30 | } from "./formCreation";
> 31 | import { faCirclePlus } from "@fortawesome/free-solid-svg-icons";
  32 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  33 |
  34 | interface CreateCardProps {

[git-hulk]

Suggested change

	url: "https://kvrocks.apache.org/docs/"
	url: "https://kvrocks.apache.org/docs/getting-started"

[Jitmisra]

okay thanks i will update

[Jitmisra]

@Jitmisra I got the following error while clicking the namespaces button:

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/app/namespaces/page.tsx
 ⨯ ./src/app/ui/createCard.tsx:31:0
Module not found: Can't resolve '@fortawesome/free-solid-svg-icons'
  29 |     ShardCreation,
  30 | } from "./formCreation";
> 31 | import { faCirclePlus } from "@fortawesome/free-solid-svg-icons";
  32 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  33 |
  34 | interface CreateCardProps {

Can you send an image of the button?.. I couldn’t find the issue locally. also can you run npm install or npm install @fortawesome/free-solid-svg-icons before sending it?

[git-hulk]

Can you send an image of the button?.. I couldn’t find the issue locally. also can you run npm install or npm install @fortawesome/free-solid-svg-icons before sending it?

Oh, my bad. I forgot to run the npm install first and it works well now. Thank you! The PR looks good to me, will merge after you update the doc link.

[shubham-j-sde]

great ui! I would love to contribute once changes are merged.

[PragmaTwice]

Thank you for your contribution!

[PragmaTwice]

Feel free to open more PRs to improve it : )

[Jitmisra]

Thank you for your contribution!
@git-hulk @PragmaTwice

thank you I really liked the idea of kv rocks and I would love to redesign the website to enhance its usability and aesthetics. I am also excited about the possibility of becoming a longterm contributor to the project and contributing to it through GSoC 2025.

[git-hulk]

I am also excited about the possibility of becoming a longterm contributor to the project and contributing to it through GSoC 2025.

@Jitmisra Happy to see this.