ui(deploy): extract MonitoringTab component

Pure presentational tab receiving MonitoringFormState via value/onChange. Also adds shared config-tab styles to AppDeploymentPage.module.css (configInline, toggleEnabled/Disabled, portPills, inputSizes, envVarsList/Row). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-22 22:55:25 +02:00
parent cc193a1075
commit 4f5a11f715
2 changed files with 220 additions and 0 deletions
--- a/ui/src/pages/AppsTab/AppDeploymentPage/ConfigTabs/MonitoringTab.tsx
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/ConfigTabs/MonitoringTab.tsx
@@ -0,0 +1,95 @@
+import { Select, Input, Toggle } from '@cameleer/design-system';
+import type { MonitoringFormState } from '../hooks/useDeploymentPageState';
+import styles from '../AppDeploymentPage.module.css';
+
+interface Props {
+  value: MonitoringFormState;
+  onChange: (next: MonitoringFormState) => void;
+  disabled?: boolean;
+}
+
+const LOG_LEVELS = ['TRACE', 'DEBUG', 'INFO', 'WARN', 'ERROR'].map((l) => ({ value: l, label: l }));
+
+export function MonitoringTab({ value, onChange, disabled }: Props) {
+  const update = <K extends keyof MonitoringFormState>(key: K, v: MonitoringFormState[K]) =>
+    onChange({ ...value, [key]: v });
+
+  return (
+    <div className={styles.configGrid}>
+      <span className={styles.configLabel}>Engine Level</span>
+      <Select
+        disabled={disabled}
+        value={value.engineLevel}
+        onChange={(e) => update('engineLevel', e.target.value)}
+        options={[
+          { value: 'NONE', label: 'NONE' },
+          { value: 'MINIMAL', label: 'MINIMAL' },
+          { value: 'REGULAR', label: 'REGULAR' },
+          { value: 'COMPLETE', label: 'COMPLETE' },
+        ]}
+      />
+
+      <span className={styles.configLabel}>Payload Capture</span>
+      <Select
+        disabled={disabled}
+        value={value.payloadCaptureMode}
+        onChange={(e) => update('payloadCaptureMode', e.target.value)}
+        options={[
+          { value: 'NONE', label: 'NONE' },
+          { value: 'INPUT', label: 'INPUT' },
+          { value: 'OUTPUT', label: 'OUTPUT' },
+          { value: 'BOTH', label: 'BOTH' },
+        ]}
+      />
+
+      <span className={styles.configLabel}>App Log Level</span>
+      <Select
+        disabled={disabled}
+        value={value.applicationLogLevel}
+        onChange={(e) => update('applicationLogLevel', e.target.value)}
+        options={LOG_LEVELS}
+      />
+
+      <span className={styles.configLabel}>Agent Log Level</span>
+      <Select
+        disabled={disabled}
+        value={value.agentLogLevel}
+        onChange={(e) => update('agentLogLevel', e.target.value)}
+        options={LOG_LEVELS}
+      />
+
+      <span className={styles.configLabel}>Metrics</span>
+      <div className={styles.configInline}>
+        <Toggle
+          checked={value.metricsEnabled}
+          onChange={() => !disabled && update('metricsEnabled', !value.metricsEnabled)}
+          disabled={disabled}
+        />
+        <span className={value.metricsEnabled ? styles.toggleEnabled : styles.toggleDisabled}>
+          {value.metricsEnabled ? 'Enabled' : 'Disabled'}
+        </span>
+      </div>
+
+      <span className={styles.configLabel}>Sampling Rate</span>
+      <Input
+        disabled={disabled}
+        value={value.samplingRate}
+        onChange={(e) => update('samplingRate', e.target.value)}
+        className={styles.inputLg}
+        placeholder="1.0"
+      />
+
+      <span className={styles.configLabel}>Compress Success</span>
+      <div className={styles.configInline}>
+        <Toggle
+          checked={value.compressSuccess}
+          onChange={() => !disabled && update('compressSuccess', !value.compressSuccess)}
+          disabled={disabled}
+        />
+        <span className={value.compressSuccess ? styles.toggleEnabled : styles.toggleDisabled}>
+          {value.compressSuccess ? 'Enabled' : 'Disabled'}
+        </span>
+      </div>
+    </div>
+  );
+}