cameleer/cameleer-server
1
0
Fork 0
Code Issues 46 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace native HTML with design system components (Phase 5)
All checks were successful
CI / cleanup-branch (push) Has been skipped
Details
CI / build (push) Successful in 1m26s
Details
CI / docker (push) Successful in 1m12s
Details
CI / deploy-feature (push) Has been skipped
Details
CI / deploy (push) Successful in 37s
Details

Browse Source 
- EnvironmentSelector: bare <select> -> DS Select
- LogTab: raw <table> + <input> + <button> -> DS LogViewer + Input + Button
- AppsTab: 3 homegrown sub-tab bars -> DS Tabs, remove unused CSS
- AppConfigDetailPage: 4x <select> -> DS Select, 2x <input checkbox> ->
  DS Toggle, 7x <label> -> DS Label, 4x <button> -> DS Button
- AgentHealth: 4x <select> -> DS Select, 7x <button> -> DS Button

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-09 15:22:14 +02:00
parent ff62a34d89
commit 3f94c98c5b
10 changed files with 185 additions and 461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
ui/src/pages/AgentHealth/AgentHealth.tsx
View File

@@ -4,7 +4,7 @@ import { ExternalLink, RefreshCw, Pencil } from 'lucide-react';
import {
StatCard, StatusDot, Badge, MonoText,
GroupCard, DataTable, EventFeed,
LogViewer, ButtonGroup, SectionHeader, Toggle, useToast,
LogViewer, ButtonGroup, SectionHeader, Toggle, Select, Button, useToast,
} from '@cameleer/design-system';
import type { Column, FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
import styles from './AgentHealth.module.css';
@@ -356,45 +356,53 @@ export default function AgentHealth() {
<>
<div className={styles.configField}>
<span className={styles.configLabel}>App Log Level</span>
<select className={styles.configSelect} value={String(configDraft.applicationLogLevel ?? 'INFO')}
onChange={(e) => setConfigDraft(d => ({ ...d, applicationLogLevel: e.target.value }))}>
<option value="ERROR">ERROR</option>
<option value="WARN">WARN</option>
<option value="INFO">INFO</option>
<option value="DEBUG">DEBUG</option>
<option value="TRACE">TRACE</option>
</select>
<Select value={String(configDraft.applicationLogLevel ?? 'INFO')}
onChange={(e) => setConfigDraft(d => ({ ...d, applicationLogLevel: e.target.value }))}
options={[
{ value: 'ERROR', label: 'ERROR' },
{ value: 'WARN', label: 'WARN' },
{ value: 'INFO', label: 'INFO' },
{ value: 'DEBUG', label: 'DEBUG' },
{ value: 'TRACE', label: 'TRACE' },
]}
/>
</div>
<div className={styles.configField}>
<span className={styles.configLabel}>Agent Log Level</span>
<select className={styles.configSelect} value={String(configDraft.agentLogLevel ?? 'INFO')}
onChange={(e) => setConfigDraft(d => ({ ...d, agentLogLevel: e.target.value }))}>
<option value="ERROR">ERROR</option>
<option value="WARN">WARN</option>
<option value="INFO">INFO</option>
<option value="DEBUG">DEBUG</option>
<option value="TRACE">TRACE</option>
</select>
<Select value={String(configDraft.agentLogLevel ?? 'INFO')}
onChange={(e) => setConfigDraft(d => ({ ...d, agentLogLevel: e.target.value }))}
options={[
{ value: 'ERROR', label: 'ERROR' },
{ value: 'WARN', label: 'WARN' },
{ value: 'INFO', label: 'INFO' },
{ value: 'DEBUG', label: 'DEBUG' },
{ value: 'TRACE', label: 'TRACE' },
]}
/>
</div>
<div className={styles.configField}>
<span className={styles.configLabel}>Engine Level</span>
<select className={styles.configSelect} value={String(configDraft.engineLevel ?? 'REGULAR')}
onChange={(e) => setConfigDraft(d => ({ ...d, engineLevel: e.target.value }))}>
<option value="NONE">None</option>
<option value="MINIMAL">Minimal</option>
<option value="REGULAR">Regular</option>
<option value="COMPLETE">Complete</option>
</select>
<Select value={String(configDraft.engineLevel ?? 'REGULAR')}
onChange={(e) => setConfigDraft(d => ({ ...d, engineLevel: e.target.value }))}
options={[
{ value: 'NONE', label: 'None' },
{ value: 'MINIMAL', label: 'Minimal' },
{ value: 'REGULAR', label: 'Regular' },
{ value: 'COMPLETE', label: 'Complete' },
]}
/>
</div>
<div className={styles.configField}>
<span className={styles.configLabel}>Payload Capture</span>
<select className={styles.configSelect} value={String(configDraft.payloadCaptureMode ?? 'NONE')}
onChange={(e) => setConfigDraft(d => ({ ...d, payloadCaptureMode: e.target.value }))}>
<option value="NONE">None</option>
<option value="INPUT">Input</option>
<option value="OUTPUT">Output</option>
<option value="BOTH">Both</option>
</select>
<Select value={String(configDraft.payloadCaptureMode ?? 'NONE')}
onChange={(e) => setConfigDraft(d => ({ ...d, payloadCaptureMode: e.target.value }))}
options={[
{ value: 'NONE', label: 'None' },
{ value: 'INPUT', label: 'Input' },
{ value: 'OUTPUT', label: 'Output' },
{ value: 'BOTH', label: 'Both' },
]}
/>
</div>
<div className={styles.configField}>
<span className={styles.configLabel}>Metrics</span>
@@ -402,8 +410,8 @@ export default function AgentHealth() {
onChange={(e) => setConfigDraft(d => ({ ...d, metricsEnabled: (e.target as HTMLInputElement).checked }))} />
</div>
<div className={styles.configActions}>
<button className={styles.configSaveBtn} onClick={saveConfigEdit} disabled={updateConfig.isPending}>Save</button>
<button className={styles.configCancelBtn} onClick={() => { setConfigEditing(false); setConfigDraft({}); }}>Cancel</button>
<Button variant="primary" size="sm" onClick={saveConfigEdit} disabled={updateConfig.isPending}>Save</Button>
<Button variant="secondary" size="sm" onClick={() => { setConfigEditing(false); setConfigDraft({}); }}>Cancel</Button>
</div>
</>
) : (
@@ -445,7 +453,7 @@ export default function AgentHealth() {
<span className={styles.configLabel}>Metrics</span>
<Badge label={appConfig.metricsEnabled ? 'On' : 'Off'} color={appConfig.metricsEnabled ? 'success' : 'error'} variant="filled" />
</div>
<button className={styles.configEditBtn} title="Edit config" onClick={startConfigEdit}><Pencil size={14} /></button>
<Button variant="ghost" size="sm" title="Edit config" onClick={startConfigEdit}><Pencil size={14} /></Button>
</>
)}
</div>
@@ -514,12 +522,12 @@ export default function AgentHealth() {
<SectionHeader>Application Log</SectionHeader>
<div className={logStyles.headerActions}>
<span className={styles.sectionMeta}>{logEntries.length} entries</span>
<button className={logStyles.sortBtn} onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
<Button variant="ghost" size="sm" onClick={() => setLogSortAsc((v) => !v)} title={logSortAsc ? 'Oldest first' : 'Newest first'}>
{logSortAsc ? '\u2191' : '\u2193'}
</button>
<button className={logStyles.refreshBtn} onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
</Button>
<Button variant="ghost" size="sm" onClick={() => setLogRefreshTo(new Date().toISOString())} title="Refresh">
<RefreshCw size={14} />
</button>
</Button>
</div>
</div>
<div className={logStyles.logToolbar}>
@@ -545,9 +553,9 @@ export default function AgentHealth() {
</div>
<ButtonGroup items={LOG_LEVEL_ITEMS} value={logLevels} onChange={setLogLevels} />
{logLevels.size > 0 && (
<button className={logStyles.logClearFilters} onClick={() => setLogLevels(new Set())}>
<Button variant="ghost" size="sm" onClick={() => setLogLevels(new Set())}>
Clear
</button>
</Button>
)}
</div>
{filteredLogs.length > 0 ? (
@@ -564,12 +572,12 @@ export default function AgentHealth() {
<span className={styles.sectionTitle}>Timeline</span>
<div className={logStyles.headerActions}>
<span className={styles.sectionMeta}>{feedEvents.length} events</span>
<button className={logStyles.sortBtn} onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
<Button variant="ghost" size="sm" onClick={() => setEventSortAsc((v) => !v)} title={eventSortAsc ? 'Oldest first' : 'Newest first'}>
{eventSortAsc ? '\u2191' : '\u2193'}
</button>
<button className={logStyles.refreshBtn} onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
</Button>
<Button variant="ghost" size="sm" onClick={() => setEventRefreshTo(new Date().toISOString())} title="Refresh">
<RefreshCw size={14} />
</button>
</Button>
</div>
</div>
{feedEvents.length > 0 ? (