Skip to content
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.

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

Plugins: added Resource CircularChart example plugin #2832

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Faakhir30
Copy link
Contributor

@Faakhir30 Faakhir30 commented Feb 2, 2025

Closes #586 [READY FOR REVIEW]

Implements a Resource CircularChart example plugin showing pod failure stats

This PR adds a new example plugin that demonstrates how to use Headlamp's CircularChart components to visualize cluster resource data. The implementation process involved:

  1. Created a new resource-charts plugin showing failed vs total pods

  2. Initially used CircularChart component, then simplified to use TileChart directly:

    • Removed unnecessary metrics-related functionality
    • Added theme-based error coloring for better visualization
    • Improved chart labeling and percentage calculations
  3. Added documentation in README.md explaining:

    • Plugin purpose and features
    • Setup instructions
    • Implementation details and key concepts

The example plugin is:

  • Using K8s.ResourceClasses for data fetching
  • Implementing chart processors for Overview page as an example page.
  • Using redux slice for plugin charts, then processing on frontend code.

Pod Failed Chart on Overview Page:

image

Plugin Details:
image

Screencast of failing live Pod:

Screencast.from.2025-02-03.02-45-13.webm

Tests Passing (YES :)

image

@dosubot dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Feb 2, 2025
@illume
Copy link
Collaborator

illume commented Feb 5, 2025

Nice one.

I noticed there's an issue when building docs on CI: https://github.com/headlamp-k8s/headlamp/actions/runs/13102964037/job/36701030284?pr=2832#step:4:28

Probably you can make docs to reproduce it locally.

@illume
Copy link
Collaborator

illume commented Feb 5, 2025

btw, we don't use the feat() style commit messages.

@Faakhir30 Faakhir30 force-pushed the feat/resource_charts_example_plugin branch from cfbe200 to 83c6fc2 Compare February 5, 2025 12:12
@Faakhir30
Copy link
Contributor Author

Thanks @illume ,
Reproduced and fixed the failing check.

Rebased with upstream main and cleared commit history to single commit with specified style of commits in headlamp.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
size:L This PR changes 100-499 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[RFE] Add example plugin showing how to use the Resource CircularChart
2 participants