fix: use deterministic badge color for app names in Logs tab
All checks were successful
CI / cleanup-branch (push) Has been skipped
CI / build (push) Successful in 1m9s
CI / docker (push) Successful in 1m0s
CI / deploy-feature (push) Has been skipped
CI / deploy (push) Successful in 42s

Use attributeBadgeColor() (hash-based) instead of "auto" so the same
application name gets the same badge color across all pages.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-02 16:31:04 +02:00
parent b73f5e6dd4
commit 4d66d6ab23

View File

@@ -2,6 +2,7 @@ import { useState, useCallback } from 'react';
import { useNavigate } from 'react-router'; import { useNavigate } from 'react-router';
import { Badge } from '@cameleer/design-system'; import { Badge } from '@cameleer/design-system';
import type { LogEntryResponse } from '../../api/queries/logs'; import type { LogEntryResponse } from '../../api/queries/logs';
import { attributeBadgeColor } from '../../utils/attribute-color';
import styles from './LogEntry.module.css'; import styles from './LogEntry.module.css';
function levelColor(level: string): string { function levelColor(level: string): string {
@@ -63,7 +64,7 @@ export function LogEntry({ entry }: LogEntryProps) {
<div className={styles.row}> <div className={styles.row}>
<span className={styles.timestamp}>{formatTime(entry.timestamp)}</span> <span className={styles.timestamp}>{formatTime(entry.timestamp)}</span>
<span className={styles.level} style={{ color: levelColor(entry.level) }}>{entry.level}</span> <span className={styles.level} style={{ color: levelColor(entry.level) }}>{entry.level}</span>
{entry.application && <Badge label={entry.application} color="auto" />} {entry.application && <Badge label={entry.application} color={attributeBadgeColor(entry.application)} />}
<span className={styles.logger} title={entry.loggerName ?? ''}> <span className={styles.logger} title={entry.loggerName ?? ''}>
{abbreviateLogger(entry.loggerName)} {abbreviateLogger(entry.loggerName)}
</span> </span>