[voidstackloop]

Fixes #6372

What

In ui/packages/app/web/src/components/Targets/utils.ts, getHealthStatus(numericValue) converts a numeric enum into its display label via:

const label = Object.values(HealthStatus)[numericValue];

If numericValue is outside the range [0, 2] (e.g., negative, an unexpected value, or a newer protobuf enum introduced server-side):

• label becomes undefined.
• colorVariants[label] also returns undefined.
• Returning { label: undefined, colorVariant: undefined } propagates downstream to the Pill component in TargetsTable.tsx, causing React component rendering errors.

Fix

Default to HealthStatus.Unspecified whenever the index does not resolve to a valid enum entry:

export const getHealthStatus = (numericValue: number): {label: HealthStatusType; colorVariant: PillVariant} => {
  const values = Object.values(HealthStatus);
  const label: HealthStatusType = values[numericValue] ?? HealthStatus.Unspecified;

  const colorVariants: Record<HealthStatusType, PillVariant> = {
    Unspecified: 'neutral',
    Good: 'success',
    Bad: 'danger',
  };
  return {label, colorVariant: colorVariants[label]};
};

Tests

Added test cases in ui/packages/app/web/src/components/Targets/utils.test.ts asserting that out-of-range (3), negative (-1), and NaN numeric values safely fall back to { label: 'Unspecified', colorVariant: 'neutral' }.