Function LogRow

apps/vis/web/src/components/logs/LogsTab.tsx:164–190

({ line }: { line: LogLine })

}

function LogRow({ line }: { line: LogLine }) {
  const fieldKeys = Object.keys(line.fields);
  return (
    <div className="flex items-start gap-2 border-b border-border/40 px-3 py-[3px] font-mono text-[11px] hover:bg-surface-1">
      <span className="w-[68px] shrink-0 text-fg-3 tabular" title={line.time ?? ''}>
        {line.time ? formatWallClock(Date.parse(line.time)) : '—'}
      </span>
      <span className="w-[52px] shrink-0">
        {line.level ? (
          <Pill tone={levelTone(line.level)} variant="outline">{line.level}</Pill>
        ) : null}
      </span>
      <span className="min-w-0 flex-1 break-words text-fg-1">
        {line.message}
        {fieldKeys.length > 0 ? (
          <span className="ml-2 text-fg-3">
            {fieldKeys.map((k) => (
              <span key={k} className="mr-2">
                <span className="text-fg-2">{k}</span>=<span className="text-[var(--color-sev-info)]">{line.fields[k]}</span>
              </span>
            ))}
          </span>
        ) : null}
      </span>
    </div>
  );
}