refactor: config settings shown as badges with pencil-to-edit

Settings (log level, engine level, payload capture, metrics) now display as color-coded badges by default. Clicking the pencil icon enters edit mode where badges become dropdowns. Save (checkmark) persists changes and reverts to badge view; cancel discards changes. Applied consistently on both the admin App Config page and the AgentHealth config bar. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-26 13:12:56 +01:00
parent b1c2950b1e
commit 4b66d78cf4
4 changed files with 298 additions and 116 deletions
--- a/ui/src/pages/Admin/AppConfigPage.module.css
+++ b/ui/src/pages/Admin/AppConfigPage.module.css
@@ -16,6 +16,34 @@
  opacity: 1;
 }

+.editBtn {
+  background: transparent;
+  border: none;
+  color: var(--text-faint);
+  opacity: 0.75;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 2px 4px;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+  display: inline-flex;
+}
+
+.editBtn:hover {
+  color: var(--text-primary);
+  opacity: 1;
+}
+
+.editBtn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.editActions {
+  display: inline-flex;
+  gap: 2px;
+}
+
 .inlineSelect {
  padding: 3px 8px;
  border: 1px solid var(--border-subtle);
--- a/ui/src/pages/Admin/AppConfigPage.tsx
+++ b/ui/src/pages/Admin/AppConfigPage.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import { useNavigate } from 'react-router';
 import { DataTable, Badge, MonoText, useToast } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
@@ -20,7 +20,9 @@ function timeAgo(iso?: string): string {
  return `${Math.floor(hours / 24)}d ago`;
 }

-function logLevelColor(level?: string): string {
+type BadgeColor = 'primary' | 'success' | 'warning' | 'error' | 'running' | 'auto';
+
+function logLevelColor(level?: string): BadgeColor {
  switch (level?.toUpperCase()) {
    case 'ERROR': return 'error';
    case 'WARN': return 'warning';
@@ -29,23 +31,59 @@ function logLevelColor(level?: string): string {
  }
 }

+function engineLevelColor(level?: string): BadgeColor {
+  switch (level?.toUpperCase()) {
+    case 'NONE': return 'error';
+    case 'MINIMAL': return 'warning';
+    case 'COMPLETE': return 'running';
+    default: return 'success';
+  }
+}
+
+function payloadColor(mode?: string): BadgeColor {
+  switch (mode?.toUpperCase()) {
+    case 'INPUT': case 'OUTPUT': return 'warning';
+    case 'BOTH': return 'running';
+    default: return 'auto';
+  }
+}
+
 export default function AppConfigPage() {
  const navigate = useNavigate();
  const { toast } = useToast();
  const { data: configs } = useAllApplicationConfigs();
  const updateConfig = useUpdateApplicationConfig();
+  const [editingApp, setEditingApp] = useState<string | null>(null);
+  const [draft, setDraft] = useState<Partial<ApplicationConfig>>({});

-  const handleChange = useCallback((config: ApplicationConfig, field: string, value: string | boolean) => {
-    const updated = { ...config, [field]: value };
+  const startEditing = useCallback((row: ConfigRow) => {
+    setEditingApp(row.application);
+    setDraft({
+      logForwardingLevel: row.logForwardingLevel ?? 'INFO',
+      engineLevel: row.engineLevel ?? 'REGULAR',
+      payloadCaptureMode: row.payloadCaptureMode ?? 'NONE',
+      metricsEnabled: row.metricsEnabled,
+    });
+  }, []);
+
+  const cancelEditing = useCallback(() => {
+    setEditingApp(null);
+    setDraft({});
+  }, []);
+
+  const saveEditing = useCallback((row: ConfigRow) => {
+    const updated = { ...row, ...draft };
    updateConfig.mutate(updated, {
      onSuccess: (saved) => {
-        toast({ title: 'Config updated', description: `${config.application}: ${field} \u2192 ${value} (v${saved.version})`, variant: 'success' });
+        setEditingApp(null);
+        setDraft({});
+        toast({ title: 'Config updated', description: `${row.application} (v${saved.version})`, variant: 'success' });
      },
      onError: () => {
-        toast({ title: 'Config update failed', description: config.application, variant: 'error' });
+        toast({ title: 'Config update failed', description: row.application, variant: 'error' });
      },
    });
-  }, [updateConfig, toast]);
+  }, [draft, updateConfig, toast]);

  const columns: Column<ConfigRow>[] = useMemo(() => [
    {
@@ -65,6 +103,41 @@ export default function AppConfigPage() {
        </button>
      ),
    },
+    {
+      key: '_edit',
+      header: '',
+      width: '36px',
+      render: (_val, row) => {
+        const isEditing = editingApp === row.application;
+        return isEditing ? (
+          <span className={styles.editActions}>
+            <button
+              className={styles.editBtn}
+              title="Save"
+              onClick={(e) => { e.stopPropagation(); saveEditing(row); }}
+              disabled={updateConfig.isPending}
+            >
+              &#x2713;
+            </button>
+            <button
+              className={styles.editBtn}
+              title="Cancel"
+              onClick={(e) => { e.stopPropagation(); cancelEditing(); }}
+            >
+              &#x2715;
+            </button>
+          </span>
+        ) : (
+          <button
+            className={styles.editBtn}
+            title="Edit config"
+            onClick={(e) => { e.stopPropagation(); startEditing(row); }}
+          >
+            &#x270E;
+          </button>
+        );
+      },
+    },
    {
      key: 'application',
      header: 'Application',
@@ -74,69 +147,88 @@ export default function AppConfigPage() {
    {
      key: 'logForwardingLevel',
      header: 'Log Level',
-      render: (_val, row) => (
-        <select
-          className={styles.inlineSelect}
-          value={row.logForwardingLevel ?? 'INFO'}
-          onChange={(e) => { e.stopPropagation(); handleChange(row, 'logForwardingLevel', e.target.value); }}
-          disabled={updateConfig.isPending}
-        >
-          <option value="ERROR">ERROR</option>
-          <option value="WARN">WARN</option>
-          <option value="INFO">INFO</option>
-          <option value="DEBUG">DEBUG</option>
-        </select>
-      ),
+      render: (_val, row) => {
+        const val = row.logForwardingLevel ?? 'INFO';
+        if (editingApp === row.application) {
+          return (
+            <select
+              className={styles.inlineSelect}
+              value={draft.logForwardingLevel ?? val}
+              onChange={(e) => { e.stopPropagation(); setDraft(d => ({ ...d, logForwardingLevel: e.target.value })); }}
+            >
+              <option value="ERROR">ERROR</option>
+              <option value="WARN">WARN</option>
+              <option value="INFO">INFO</option>
+              <option value="DEBUG">DEBUG</option>
+            </select>
+          );
+        }
+        return <Badge label={val} color={logLevelColor(val)} variant="filled" />;
+      },
    },
    {
      key: 'engineLevel',
      header: 'Engine Level',
-      render: (_val, row) => (
-        <select
-          className={styles.inlineSelect}
-          value={row.engineLevel ?? 'REGULAR'}
-          onChange={(e) => { e.stopPropagation(); handleChange(row, 'engineLevel', e.target.value); }}
-          disabled={updateConfig.isPending}
-        >
-          <option value="NONE">None</option>
-          <option value="MINIMAL">Minimal</option>
-          <option value="REGULAR">Regular</option>
-          <option value="COMPLETE">Complete</option>
-        </select>
-      ),
+      render: (_val, row) => {
+        const val = row.engineLevel ?? 'REGULAR';
+        if (editingApp === row.application) {
+          return (
+            <select
+              className={styles.inlineSelect}
+              value={draft.engineLevel ?? val}
+              onChange={(e) => { e.stopPropagation(); setDraft(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>
+          );
+        }
+        return <Badge label={val} color={engineLevelColor(val)} variant="filled" />;
+      },
    },
    {
      key: 'payloadCaptureMode',
      header: 'Payload Capture',
-      render: (_val, row) => (
-        <select
-          className={styles.inlineSelect}
-          value={row.payloadCaptureMode ?? 'NONE'}
-          onChange={(e) => { e.stopPropagation(); handleChange(row, 'payloadCaptureMode', e.target.value); }}
-          disabled={updateConfig.isPending}
-        >
-          <option value="NONE">None</option>
-          <option value="INPUT">Input</option>
-          <option value="OUTPUT">Output</option>
-          <option value="BOTH">Both</option>
-        </select>
-      ),
+      render: (_val, row) => {
+        const val = row.payloadCaptureMode ?? 'NONE';
+        if (editingApp === row.application) {
+          return (
+            <select
+              className={styles.inlineSelect}
+              value={draft.payloadCaptureMode ?? val}
+              onChange={(e) => { e.stopPropagation(); setDraft(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>
+          );
+        }
+        return <Badge label={val} color={payloadColor(val)} variant="filled" />;
+      },
    },
    {
      key: 'metricsEnabled',
      header: 'Metrics',
      width: '80px',
-      render: (_val, row) => (
-        <label className={styles.inlineToggle} onClick={(e) => e.stopPropagation()}>
-          <input
-            type="checkbox"
-            checked={row.metricsEnabled}
-            onChange={(e) => handleChange(row, 'metricsEnabled', e.target.checked)}
-            disabled={updateConfig.isPending}
-          />
-          <span>{row.metricsEnabled ? 'On' : 'Off'}</span>
-        </label>
-      ),
+      render: (_val, row) => {
+        if (editingApp === row.application) {
+          return (
+            <label className={styles.inlineToggle} onClick={(e) => e.stopPropagation()}>
+              <input
+                type="checkbox"
+                checked={draft.metricsEnabled ?? row.metricsEnabled}
+                onChange={(e) => setDraft(d => ({ ...d, metricsEnabled: e.target.checked }))}
+              />
+              <span>{(draft.metricsEnabled ?? row.metricsEnabled) ? 'On' : 'Off'}</span>
+            </label>
+          );
+        }
+        return <Badge label={row.metricsEnabled ? 'On' : 'Off'} color={row.metricsEnabled ? 'success' : 'error'} variant="filled" />;
+      },
    },
    {
      key: 'tracedProcessors',
@@ -160,7 +252,7 @@ export default function AppConfigPage() {
      header: 'Updated',
      render: (_val, row) => <MonoText size="xs">{timeAgo(row.updatedAt)}</MonoText>,
    },
-  ], [navigate, handleChange, updateConfig.isPending]);
+  ], [navigate, editingApp, draft, startEditing, cancelEditing, saveEditing, updateConfig.isPending]);

  return (
    <div>
--- a/ui/src/pages/AgentHealth/AgentHealth.module.css
+++ b/ui/src/pages/AgentHealth/AgentHealth.module.css
@@ -94,6 +94,31 @@
  cursor: pointer;
 }

+.configEditBtn {
+  background: transparent;
+  border: none;
+  color: var(--text-faint);
+  opacity: 0.75;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px 6px;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+  display: inline-flex;
+  align-self: flex-end;
+  margin-left: auto;
+}
+
+.configEditBtn:hover {
+  color: var(--text-primary);
+  opacity: 1;
+}
+
+.configEditBtn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
 /* Section header */
 .sectionTitle {
  font-size: 13px;
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -247,18 +247,34 @@ export default function AgentHealth() {
  const { data: appConfig } = useApplicationConfig(appId);
  const updateConfig = useUpdateApplicationConfig();

-  const handleConfigChange = useCallback((field: string, value: string | boolean) => {
+  const [configEditing, setConfigEditing] = useState(false);
+  const [configDraft, setConfigDraft] = useState<Record<string, string | boolean>>({});
+
+  const startConfigEdit = useCallback(() => {
    if (!appConfig) return;
-    const updated = { ...appConfig, [field]: value };
+    setConfigDraft({
+      logForwardingLevel: appConfig.logForwardingLevel ?? 'INFO',
+      engineLevel: appConfig.engineLevel ?? 'REGULAR',
+      payloadCaptureMode: appConfig.payloadCaptureMode ?? 'NONE',
+      metricsEnabled: appConfig.metricsEnabled,
+    });
+    setConfigEditing(true);
+  }, [appConfig]);
+
+  const saveConfigEdit = useCallback(() => {
+    if (!appConfig) return;
+    const updated = { ...appConfig, ...configDraft };
    updateConfig.mutate(updated, {
      onSuccess: (saved) => {
-        toast({ title: 'Config updated', description: `${field} → ${value} (v${saved.version})`, variant: 'success' });
+        setConfigEditing(false);
+        setConfigDraft({});
+        toast({ title: 'Config updated', description: `${appId} (v${saved.version})`, variant: 'success' });
      },
      onError: () => {
        toast({ title: 'Config update failed', variant: 'error' });
      },
    });
-  }, [appConfig, updateConfig, toast]);
+  }, [appConfig, configDraft, updateConfig, toast, appId]);
  const [eventSortAsc, setEventSortAsc] = useState(false);
  const [eventRefreshTo, setEventRefreshTo] = useState<string | undefined>();
  const { data: events } = useAgentEvents(appId, undefined, 50, eventRefreshTo);
@@ -509,60 +525,81 @@ export default function AgentHealth() {
      {/* Application config bar */}
      {appId && appConfig && (
        <div className={styles.configBar}>
-          <div className={styles.configField}>
-            <span className={styles.configLabel}>Log Level</span>
-            <select
-              className={styles.configSelect}
-              value={appConfig.logForwardingLevel ?? 'INFO'}
-              onChange={(e) => handleConfigChange('logForwardingLevel', e.target.value)}
-              disabled={updateConfig.isPending}
-            >
-              <option value="ERROR">ERROR</option>
-              <option value="WARN">WARN</option>
-              <option value="INFO">INFO</option>
-              <option value="DEBUG">DEBUG</option>
-            </select>
-          </div>
-          <div className={styles.configField}>
-            <span className={styles.configLabel}>Engine Level</span>
-            <select
-              className={styles.configSelect}
-              value={appConfig.engineLevel ?? 'REGULAR'}
-              onChange={(e) => handleConfigChange('engineLevel', e.target.value)}
-              disabled={updateConfig.isPending}
-            >
-              <option value="NONE">None</option>
-              <option value="MINIMAL">Minimal</option>
-              <option value="REGULAR">Regular</option>
-              <option value="COMPLETE">Complete</option>
-            </select>
-          </div>
-          <div className={styles.configField}>
-            <span className={styles.configLabel}>Payload Capture</span>
-            <select
-              className={styles.configSelect}
-              value={appConfig.payloadCaptureMode ?? 'NONE'}
-              onChange={(e) => handleConfigChange('payloadCaptureMode', e.target.value)}
-              disabled={updateConfig.isPending}
-            >
-              <option value="NONE">None</option>
-              <option value="INPUT">Input</option>
-              <option value="OUTPUT">Output</option>
-              <option value="BOTH">Both</option>
-            </select>
-          </div>
-          <div className={styles.configField}>
-            <span className={styles.configLabel}>Metrics</span>
-            <label className={styles.configToggle}>
-              <input
-                type="checkbox"
-                checked={appConfig.metricsEnabled}
-                onChange={(e) => handleConfigChange('metricsEnabled', e.target.checked)}
-                disabled={updateConfig.isPending}
-              />
-              <span>{appConfig.metricsEnabled ? 'Enabled' : 'Disabled'}</span>
-            </label>
-          </div>
+          {configEditing ? (
+            <>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Log Level</span>
+                <select className={styles.configSelect} value={String(configDraft.logForwardingLevel ?? 'INFO')}
+                  onChange={(e) => setConfigDraft(d => ({ ...d, logForwardingLevel: e.target.value }))}>
+                  <option value="ERROR">ERROR</option>
+                  <option value="WARN">WARN</option>
+                  <option value="INFO">INFO</option>
+                  <option value="DEBUG">DEBUG</option>
+                </select>
+              </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>
+              </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>
+              </div>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Metrics</span>
+                <label className={styles.configToggle}>
+                  <input type="checkbox" checked={Boolean(configDraft.metricsEnabled)}
+                    onChange={(e) => setConfigDraft(d => ({ ...d, metricsEnabled: e.target.checked }))} />
+                  <span>{configDraft.metricsEnabled ? 'On' : 'Off'}</span>
+                </label>
+              </div>
+              <button className={styles.configEditBtn} title="Save" onClick={saveConfigEdit} disabled={updateConfig.isPending}>&#x2713;</button>
+              <button className={styles.configEditBtn} title="Cancel" onClick={() => { setConfigEditing(false); setConfigDraft({}); }}>&#x2715;</button>
+            </>
+          ) : (
+            <>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Log Level</span>
+                <Badge label={appConfig.logForwardingLevel ?? 'INFO'} color={
+                  (appConfig.logForwardingLevel ?? 'INFO') === 'ERROR' ? 'error'
+                  : (appConfig.logForwardingLevel ?? 'INFO') === 'WARN' ? 'warning'
+                  : (appConfig.logForwardingLevel ?? 'INFO') === 'DEBUG' ? 'running' : 'success'
+                } variant="filled" />
+              </div>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Engine Level</span>
+                <Badge label={appConfig.engineLevel ?? 'REGULAR'} color={
+                  (appConfig.engineLevel ?? 'REGULAR') === 'NONE' ? 'error'
+                  : (appConfig.engineLevel ?? 'REGULAR') === 'MINIMAL' ? 'warning'
+                  : (appConfig.engineLevel ?? 'REGULAR') === 'COMPLETE' ? 'running' : 'success'
+                } variant="filled" />
+              </div>
+              <div className={styles.configField}>
+                <span className={styles.configLabel}>Payload Capture</span>
+                <Badge label={appConfig.payloadCaptureMode ?? 'NONE'} color={
+                  (appConfig.payloadCaptureMode ?? 'NONE') === 'BOTH' ? 'running'
+                  : (appConfig.payloadCaptureMode ?? 'NONE') === 'NONE' ? 'auto' : 'warning'
+                } variant="filled" />
+              </div>
+              <div className={styles.configField}>
+                <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}>&#x270E;</button>
+            </>
+          )}
        </div>
      )}