fix: add human-readable labels for gadget data table columns

[Jeph-150]

Added a columnLabels mapping in src/common/helpers.tsx that translates raw API
field names to human-friendly labels (e.g. proc.comm → Process Name,
k8s.podName → Pod Name). Applied this mapping in both GadgetWithDataSource
and resourcegadgets where table columns are rendered, with a fallback to the raw
field name for unmapped columns.

A more scalable long-term solution would read labels directly from the gadget's
field annotations in gadgetInfo, which would work automatically across all gadgets.
This PR is a first step toward improving data readability UX.

Relates to #17

How to use

1. Deploy Inspektor Gadget to a local kind cluster
2. Load the Headlamp plugin
3. Run any gadget (e.g. ghcr.io/inspektor-gadget/gadget/trace_open:latest)
4. Verify column headers show human-readable labels instead of raw API field names

Testing done

Ran trace_open gadget locally against a kind cluster. Confirmed column headers
now display as "Process Name", "Process ID", "File Name", etc. instead of
proc.comm, proc.pid, fname.

[Copilot]

Pull request overview

This PR improves gadget data table readability by introducing a centralized mapping from raw API field names to human-friendly column labels, and applying it where table columns are rendered.

Changes:

• Add a columnLabels mapping in src/common/helpers.tsx for common gadget field names.
• Use columnLabels as the source of displayed column headers in GadgetWithDataSource and resourcegadgets (with fallback to the raw column name).
• Update package-lock.json metadata (including version alignment).

Reviewed changes

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

File	Description
src/common/helpers.tsx	Adds centralized columnLabels mapping for display labels.
src/common/GadgetWithDataSource/index.tsx	Applies columnLabels when constructing table column headers.
src/gadgets/resourcegadgets.tsx	Applies columnLabels when rendering resource gadget table columns.
package-lock.json	Lockfile updates (including version alignment).

Comments suppressed due to low confidence (1)

src/gadgets/resourcegadgets.tsx:472

• GadgetDataView builds header from columnLabels[column] || column, but later metric detection uses field.header === 'isMetric'. Since header is now a display label (not a stable column identifier), use the IS_METRIC constant and/or detect metrics based on the original column value instead of the rendered header to avoid brittle behavior when labels are added/changed.

        header: columnLabels[column] || column, // Use label if available, otherwise fallback to column name
        accessorFn: data =>
          column === 'timestamp' ? <DateLabel date={data[column]} /> : data[column],
      })) || []
    );

---

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