grafana/public/app/features/alerting/unified/components/rules/AlertInstanceDetails.tsx

import { Alert } from 'app/types/unified-alerting';
import React, { FC } from 'react';
import { Annotation } from '../Annotation';
import { DetailsField } from './DetailsField';

interface Props {
  instance: Alert;
}

export const AlertInstanceDetails: FC<Props> = ({ instance }) => {
  const annotations = Object.entries(instance.annotations || {}) || [];

  return (
    <div>
      <DetailsField label="Value" horizontal={true}>
        {instance.value}
      </DetailsField>
      {annotations.map(([key, value]) => (
        <DetailsField key={key} label={key} horizontal={true}>
          <Annotation annotationKey={key} value={value} />
        </DetailsField>
      ))}
    </div>
  );
};