refactor: move inline styles to CSS modules
Extract inline fontSize/color styles from LogTab, LayoutShell, UsersTab, GroupsTab, RolesTab, and LevelFilterBar into CSS modules. Follows project convention of CSS modules over inline styles. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
97
ui/src/components/ExecutionDiagram/tabs/LogTab.module.css
Normal file
97
ui/src/components/ExecutionDiagram/tabs/LogTab.module.css
Normal file
@@ -0,0 +1,97 @@
|
||||
/* ==========================================================================
|
||||
LOG TAB — STYLES
|
||||
========================================================================== */
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.filterBar {
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.filterInput {
|
||||
width: 100%;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
outline: none;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
.logList {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
font-size: 12px;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.logTable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.logRow {
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.timestampCell {
|
||||
padding: 3px 6px;
|
||||
white-space: nowrap;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.levelCell {
|
||||
padding: 3px 4px;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.levelError {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.levelWarn {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.levelDebug {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.levelTrace {
|
||||
color: var(--text-faint, var(--text-muted));
|
||||
}
|
||||
|
||||
.levelDefault {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.messageCell {
|
||||
padding: 3px 6px;
|
||||
color: var(--text-primary);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 6px 10px;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.openLogsButton {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--amber);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
@@ -2,7 +2,8 @@ import { useState, useMemo } from 'react';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { useApplicationLogs } from '../../../api/queries/logs';
|
||||
import type { LogEntryResponse } from '../../../api/queries/logs';
|
||||
import styles from '../ExecutionDiagram.module.css';
|
||||
import logStyles from './LogTab.module.css';
|
||||
import diagramStyles from '../ExecutionDiagram.module.css';
|
||||
|
||||
interface LogTabProps {
|
||||
applicationId: string;
|
||||
@@ -10,13 +11,13 @@ interface LogTabProps {
|
||||
processorId: string | null;
|
||||
}
|
||||
|
||||
function levelColor(level: string): string {
|
||||
function levelClass(level: string): string {
|
||||
switch (level?.toUpperCase()) {
|
||||
case 'ERROR': return 'var(--error)';
|
||||
case 'WARN': return 'var(--warning)';
|
||||
case 'DEBUG': return 'var(--text-muted)';
|
||||
case 'TRACE': return 'var(--text-faint, var(--text-muted))';
|
||||
default: return 'var(--text-secondary)';
|
||||
case 'ERROR': return logStyles.levelError;
|
||||
case 'WARN': return logStyles.levelWarn;
|
||||
case 'DEBUG': return logStyles.levelDebug;
|
||||
case 'TRACE': return logStyles.levelTrace;
|
||||
default: return logStyles.levelDefault;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,48 +66,38 @@ export function LogTab({ applicationId, exchangeId, processorId }: LogTabProps)
|
||||
}, [logs, processorId, filter]);
|
||||
|
||||
if (isLoading) {
|
||||
return <div className={styles.emptyState}>Loading logs...</div>;
|
||||
return <div className={diagramStyles.emptyState}>Loading logs...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
|
||||
<div style={{ padding: '6px 10px', borderBottom: '1px solid var(--border-subtle)' }}>
|
||||
<div className={logStyles.container}>
|
||||
<div className={logStyles.filterBar}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Filter logs..."
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '4px 8px',
|
||||
fontSize: '12px',
|
||||
border: '1px solid var(--border-subtle)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
background: 'var(--bg-surface)',
|
||||
color: 'var(--text-primary)',
|
||||
outline: 'none',
|
||||
fontFamily: 'var(--font-body)',
|
||||
}}
|
||||
className={logStyles.filterInput}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: 1, overflowY: 'auto', fontSize: '12px', fontFamily: 'var(--font-mono)' }}>
|
||||
<div className={logStyles.logList}>
|
||||
{entries.length === 0 ? (
|
||||
<div className={styles.emptyState}>
|
||||
<div className={diagramStyles.emptyState}>
|
||||
{processorId ? 'No logs for this processor' : 'No logs available'}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<table className={logStyles.logTable}>
|
||||
<tbody>
|
||||
{entries.map((entry, i) => (
|
||||
<tr key={i} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
|
||||
<td style={{ padding: '3px 6px', whiteSpace: 'nowrap', color: 'var(--text-muted)' }}>
|
||||
<tr key={i} className={logStyles.logRow}>
|
||||
<td className={logStyles.timestampCell}>
|
||||
{formatTime(entry.timestamp)}
|
||||
</td>
|
||||
<td style={{ padding: '3px 4px', whiteSpace: 'nowrap', fontWeight: 600, color: levelColor(entry.level), width: '40px' }}>
|
||||
<td className={`${logStyles.levelCell} ${levelClass(entry.level)}`}>
|
||||
{entry.level}
|
||||
</td>
|
||||
<td style={{ padding: '3px 6px', color: 'var(--text-primary)', wordBreak: 'break-word' }}>
|
||||
<td className={logStyles.messageCell}>
|
||||
{entry.message}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -114,10 +105,10 @@ export function LogTab({ applicationId, exchangeId, processorId }: LogTabProps)
|
||||
</tbody>
|
||||
</table>
|
||||
{exchangeId && (
|
||||
<div style={{ padding: '6px 10px', borderTop: '1px solid var(--border-subtle)', fontSize: '12px', textAlign: 'center' }}>
|
||||
<div className={logStyles.footer}>
|
||||
<button
|
||||
onClick={() => navigate(`/logs/${applicationId}?exchangeId=${exchangeId}`)}
|
||||
style={{ background: 'none', border: 'none', color: 'var(--amber)', cursor: 'pointer', fontSize: '12px', fontFamily: 'var(--font-body)' }}
|
||||
className={logStyles.openLogsButton}
|
||||
>
|
||||
Open in Logs tab {'\u2192'}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user