Skip to content

✨ Enhance QuickConnect logs UI for improved readability and onboarding #2348

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
arnavgogia20 wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

✨ Enhance QuickConnect logs UI for improved readability and onboarding #2348

arnavgogia20 wants to merge 6 commits into from
+470 −168

Conversation

@arnavgogia20
Copy link
Contributor

@arnavgogia20 arnavgogia20 commented Jan 12, 2026

Summary

This PR enhances the QuickConnect Logs UI in the Import Cluster → Quick Connect flow to improve readability, clarity, and overall user experience during cluster onboarding.

The update focuses purely on frontend UI/UX improvements and does not change any backend logic or APIs.

What’s Changed

  • Introduced a terminal-style log container for better structure and readability
  • Added clear visual differentiation for log types using left-border indicators:
    • Processing (amber)
    • Verifying (blue)
    • Success (green)
    • Error (red)
  • Added a sticky status indicator with a loading spinner to show the current onboarding step while logs stream
  • Improved spacing, typography, and contrast for both light and dark modes
  • Added new translation keys for onboarding step messages where needed

Before / After Preview

Before

issue.1857.video.mp4

After

Screen.Recording.2026-01-12.at.6.36.16.PM.mov

How to Test

  1. Run npm run dev
  2. Navigate to Import Cluster → Quick Connect
  3. Select a cluster and click Onboard
  4. Observe the improved logs UI during the onboarding process

Notes

Related Issue

Closes #1857

@arnavgogia20
feat(ui): enhance quickconnect logs with terminal style and status tr…
78cef86 
…acking

This commit improves the QuickConnect logs UI by adding terminal styling, status-based color indicators, and a sticky progress header. It also enhances accessibility and theme consistency. Address Issue kubestellar#1857.\n\nSigned-off-by: KubeStellar Bot <[email protected]>

Signed-off-by: arnavgogia20 <[email protected]>
@kubestellar-prow kubestellar-prow bot added the dco-signoff: yes Indicates the PR's author has signed the DCO. label Jan 12, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Jan 12, 2026

👋 Hello! @arnavgogia20 Welcome to the Kubestellar.

Thank you for submitting your first Pull Request to KubeStellar. We are delighted to have you in our Universe!
Please make sure to check out our Contribution Guide and feel free to join our Slack channel for any questions.

@kubestellar-prow
Copy link

kubestellar-prow bot commented Jan 12, 2026

Hi @arnavgogia20. Thanks for your PR.

I'm waiting for a kubestellar member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

@kubestellar-prow kubestellar-prow bot added needs-ok-to-test Indicates a PR that requires an org member to verify it is safe to test. size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. labels Jan 12, 2026
@github-actions github-actions bot added frontend and removed needs-ok-to-test Indicates a PR that requires an org member to verify it is safe to test. size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. labels Jan 12, 2026
@clubanderson clubanderson changed the title Enhance QuickConnect logs UI for improved readability and onboarding clarity ✨ Enhance QuickConnect logs UI for improved readability and onboarding Jan 12, 2026
@kubestellar-prow kubestellar-prow bot added the size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. label Jan 12, 2026
@Nupurshivani
Copy link
Contributor

Nupurshivani commented Jan 13, 2026

/ok-to-test

@kubestellar-prow kubestellar-prow bot added the ok-to-test Indicates a non-member PR verified by an org member that is safe to test. label Jan 13, 2026
@clubanderson clubanderson added the kind/feature Categorizes issue or PR as related to a new feature. label Jan 13, 2026
@kubestellar-prow
Copy link

kubestellar-prow bot commented Jan 15, 2026

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign sagar2366 for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@clubanderson clubanderson mentioned this pull request Jan 15, 2026
Closed
@btwshivam
Copy link
Contributor

btwshivam commented Jan 18, 2026

@arnavgogia20 Good Job.. but some States are failing check and fix it.. cluster should be imported sucessfully

@arnavgogia20
Copy link
Contributor Author

arnavgogia20 commented Jan 18, 2026

@arnavgogia20 Good Job.. but some States are failing check and fix it.. cluster should be imported sucessfully

Hii @btwshivam I have fixed the states which were failing and now it does not redirect again on the importing page, rather it adds a new cluster in the managed clusters dashboard....as it should be....pls review the changes and heres a screen recording aswell....thankyouu

Screen.Recording.2026-01-18.at.8.03.55.PM.mov

@MAVRICK-1
Copy link
Member

MAVRICK-1 commented Jan 19, 2026

cc @kunal-511 @btwshivam

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

dco-signoff: yes Indicates the PR's author has signed the DCO. frontend kind/feature Categorizes issue or PR as related to a new feature. ok-to-test Indicates a non-member PR verified by an org member that is safe to test. size/XL Denotes a PR that changes 500-999 lines, ignoring generated files.

Projects

KubeStellar UI Project
Status: In Progress

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Improve UI/UX of QuickConnect Logs in Import Cluster Option

5 participants

@arnavgogia20 @Nupurshivani @btwshivam @MAVRICK-1 @clubanderson