frontend: Add environment variables display for containers

[gambtho]

Summary

Display environment variables per container in pod details with enhanced functionality:

• Values from Secrets hidden by default with reveal on click
• Copy to clipboard functionality using notistack
• Links to referenced ConfigMaps and Secrets
• Warning for out-of-sync resources (when ConfigMap/Secret is newer than pod start)
• Support for valueFrom (secretKeyRef, configMapKeyRef, fieldRef, resourceFieldRef)
• Support for envFrom (secretRef, configMapRef)

The implementation uses a proper React hooks pattern with separate fetcher components to avoid rules-of-hooks violations.

Based on PR #2728 by @vlasov-y and PR #3167 by @joaquimrocha

Test plan

• View pod with env vars from manifest values
• View pod with env vars from Secrets (values hidden, can reveal)
• View pod with env vars from ConfigMaps
• View pod with envFrom (secretRef) - all keys displayed
• View pod with envFrom (configMapRef) - all keys displayed
• View pod with fieldRef env vars (e.g., metadata.name)
• View pod with resourceFieldRef env vars (e.g., limits.memory)
• Click copy button - snackbar confirmation appears
• Click reveal button on secret values - value shown
• Verify out-of-sync warning appears when ConfigMap/Secret is newer than pod
• Click links to Secrets/ConfigMaps - navigates correctly

[gambtho]

[Copilot]

Pull request overview

This PR adds a comprehensive environment variables display feature for containers in pod details. It displays environment variables from multiple sources (manifest values, Secrets, ConfigMaps, field references, resource field references) with functionality to reveal/hide secret values, copy to clipboard, link to referenced resources, and warn about out-of-sync resources.

Changes:

• Added ContainerEnvironmentVariables component with proper React hooks patterns
• Implemented resource fetching with separate fetcher components
• Added utility function divideK8sResources for resource field reference calculations
• Updated Secret Details to handle base64 encoding correctly
• Added translations for new UI elements

Reviewed changes

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

Show a summary per file

File	Description
frontend/src/components/common/Resource/Resource.tsx	Main implementation: ContainerEnvironmentVariables component, fetcher components, and environment variable processing logic
frontend/src/lib/units.ts	Added divideK8sResources function for resource calculations
frontend/src/lib/units.test.ts	Comprehensive tests for divideK8sResources
frontend/src/components/secret/Details.tsx	Updated to keep data in base64 format
frontend/src/i18n/locales/*/translation.json	Added translation for out-of-sync warning
frontend/src/plugin/snapshots/pluginLib.snapshot	Updated plugin exports
Multiple snapshot files	Updated to reflect UI changes

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[illume]

It looks like the snapshot tests need updating…
npm run test — -u

[illume]

Sorry I missed this before...

I think Resource should be added to the context part of the commit message subject to make it clearer where the change applies to.

frontend: Resource: Add environment variables display for containers

[illume]

Hello. Could you please rebase against main to remove the merge commit?

it looks like the frontend test github check is failing. Are you able to have a look?

[illume]

The frontend tests are failing again... could you please try rebasing against main, then updating the snapshot tests?

I think there might be some fixes in the main branch.

[illume]

🎉 thanks!

(Can you please ask for someone else to review this in the headlamp channel on the kubernetes slack?)

[joaquimrocha]

/lgtm
/approve

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: gambtho, illume, joaquimrocha

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

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [illume,joaquimrocha]

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