cameleer/cameleer-server
1
0
Fork 0
Code Issues 43 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

45
ui/src/pages/AppsTab/AppsTab.tsx
View File

@@ -11,6 +11,7 @@ import {
Select,
Spinner,
StatusDot,
Tabs,
Toggle,
useToast,
} from '@cameleer/design-system';
@@ -319,11 +320,15 @@ function CreateAppView({ environments, selectedEnv }: { environments: Environmen
</div>
{/* Config Tabs */}
<div className={styles.subTabs}>
<button className={`${styles.subTab} ${configTab === 'monitoring' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('monitoring')}>Monitoring</button>
<button className={`${styles.subTab} ${configTab === 'resources' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('resources')}>Resources</button>
<button className={`${styles.subTab} ${configTab === 'variables' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('variables')}>Variables</button>
</div>
<Tabs
tabs={[
{ label: 'Monitoring', value: 'monitoring' },
{ label: 'Resources', value: 'resources' },
{ label: 'Variables', value: 'variables' },
]}
active={configTab}
onChange={(v) => setConfigTab(v as typeof configTab)}
/>
{configTab === 'variables' && (
<>
@@ -558,10 +563,14 @@ function AppDetailView({ appId: appSlug, environments, selectedEnv }: { appId: s
</div>
</div>
<div className={styles.subTabs}>
<button className={`${styles.subTab} ${subTab === 'config' ? styles.subTabActive : ''}`} onClick={() => setSubTab('config')}>Configuration</button>
<button className={`${styles.subTab} ${subTab === 'overview' ? styles.subTabActive : ''}`} onClick={() => setSubTab('overview')}>Overview</button>
</div>
<Tabs
tabs={[
{ label: 'Configuration', value: 'config' },
{ label: 'Overview', value: 'overview' },
]}
active={subTab}
onChange={(v) => setSubTab(v as typeof subTab)}
/>
{subTab === 'overview' && (
<OverviewSubTab
@@ -921,13 +930,17 @@ function ConfigSubTab({ app, environment }: { app: App; environment?: Environmen
</div>
)}
<div className={styles.subTabs}>
<button className={`${styles.subTab} ${configTab === 'monitoring' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('monitoring')}>Monitoring</button>
<button className={`${styles.subTab} ${configTab === 'resources' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('resources')}>Resources</button>
<button className={`${styles.subTab} ${configTab === 'variables' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('variables')}>Variables</button>
<button className={`${styles.subTab} ${configTab === 'traces' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('traces')}>Traces & Taps</button>
<button className={`${styles.subTab} ${configTab === 'recording' ? styles.subTabActive : ''}`} onClick={() => setConfigTab('recording')}>Route Recording</button>
</div>
<Tabs
tabs={[
{ label: 'Monitoring', value: 'monitoring' },
{ label: 'Resources', value: 'resources' },
{ label: 'Variables', value: 'variables' },
{ label: 'Traces & Taps', value: 'traces' },
{ label: 'Route Recording', value: 'recording' },
]}
active={configTab}
onChange={(v) => setConfigTab(v as typeof configTab)}
/>
{configTab === 'variables' && (
<>