Expand Overview stories with empty, loading, and error states

[1012Charan]

Adds 3 Storybook stories for the Overview component:

• EmptyState (shows the UI when there's no data available)
• LoadingState (shows a spinner while data is being fetched)
• ErrorState (simulates when data fails to load)

Screenshots for new stories :
EmptyState

LoadingState

ErrorState

Note: I noticed that the Empty, Loading, and Error states all look quite similar in Storybook — they seem to show the same fallback message or UI. I'm assuming this is expected because the Overview component handles these cases in a similar way with mock data, but please let me know if I might have missed something!

[linux-foundation-easycla]

The committers listed above are authorized under a signed CLA.

• ✅ login: 1012Charan / name: Charan Vengala (25e32f4)

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

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

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

Needs approval from an approver in each of these files:

• OWNERS

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

[k8s-ci-robot]

Welcome @1012Charan!

It looks like this is your first PR to kubernetes-sigs/headlamp 🎉. Please refer to our pull request process documentation to help your PR have a smooth ride to approval.

You will be prompted by a bot to use commands during the review process. Do not be afraid to follow the prompts! It is okay to experiment. Here is the bot commands documentation.

You can also check if kubernetes-sigs/headlamp has its own contribution guidelines.

You may want to refer to our testing guide if you run into trouble with your tests not passing.

If you are having difficulty getting your pull request seen, please follow the recommended escalation practices. Also, for tips and tricks in the contribution process you may want to read the Kubernetes contributor cheat sheet. We want to make sure your contribution gets all the attention it needs!

Thank you, and welcome to Kubernetes. 😃

[joaquimrocha]

Thanks @1012Charan . Can you adapt the commit title to be more consistent with our current format:
frontend: Expand Overview stories with empty, loading, and error states

[1012Charan]

Thanks @joaquimrocha, I've updated the commit message as suggested. Please let me know if anything else is needed.

[skoeva]

Looks solid, would be nice to have screenshots in the description for the new stories

Also good to rebase against main to pull the latest changes

[1012Charan]

Thanks for the suggestion @skoeva! I've updated this branch added the screenshots, but I noticed that all three states — Empty, Loading, and Error — look almost the same in Storybook. I’m not sure if that’s okay or if I might have missed something, so please let me know if any changes are needed!

[skoeva]

The similar states should be fine, I would just squash the commits once you're done rebasing. Make sure to update the snapshots too: run make frontend-test locally and you can see which are failing

[1012Charan]

@skoeva I've rebased the branch, squashed the commits, and updated the snapshots as requested.

Since this was my first time working with things like squash and rebase, it was an exciting learning experience — so if I missed anything or made mistakes, please feel free to point them out.

Also, while running the tests, I noticed a failure in the LoadingState due to it simulating an endless request. If you'd like, I can update it to use a timeout-based delay instead.

[skoeva]

sure, no need to mock an endless request. the frontend test still seems to be failing, are you seeing something different locally?

[1012Charan]

@skoeva You're right — I rechecked and the LoadingState test is still failing on my side too.

I think it's because the mocked API requests never resolve (to simulate loading), so the test waits indefinitely and throws a waiting error. Would it be okay to skip this story in the tests using:

LoadingState.parameters = {
...LoadingState.parameters,
chromatic: { disableSnapshot: true },
};

Also, another issue was simple-eval causing the frontend tests to fail is now fixed — I had missed installing it initially, but after adding it, the other tests are passing fine.

Let me know if this approach for the loading story makes sense or if you'd prefer a different fix!