refactor(camel): restructure camel preferences

hawtio · Nov 2, 2023 · c18702e · c18702e
1 parent f5f5cb7
commit c18702e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 30 deletions.
diff --git a/packages/hawtio/src/plugins/camel/CamelPreferences.tsx b/packages/hawtio/src/plugins/camel/CamelPreferences.tsx
@@ -26,36 +26,7 @@ export const CamelPreferences: React.FunctionComponent = () => {
   return (
     <CardBody>
       <Form isHorizontal>
-        <FormSection>
-          <FormGroup
-            hasNoPaddingTop
-            label='Include trace / debug streams'
-            fieldId='camel-form-include-trace-debug-streams'
-            labelIcon={
-              <TooltipHelpIcon tooltip='Whether to include stream based message body when using the tracer and debugger' />
-            }
-          >
-            <Checkbox
-              id='camel-form-include-trace-debug-streams-input'
-              isChecked={options.traceOrDebugIncludeStreams}
-              onChange={updateCheckboxValueFor('traceOrDebugIncludeStreams')}
-            />
-          </FormGroup>
-          <FormGroup
-            hasNoPaddingTop
-            label='Maximum trace / debug body length'
-            fieldId='camel-form-maximum-trace-debug-body-length'
-            labelIcon={
-              <TooltipHelpIcon tooltip='The maximum length of the body before its clipped when using the tracer and debugger' />
-            }
-          >
-            <TextInput
-              id='camel-form-maximum-trace-debug-body-length'
-              type='number'
-              value={options.maximumTraceOrDebugBodyLength}
-              onChange={updateNumberValueFor('maximumTraceOrDebugBodyLength')}
-            />
-          </FormGroup>
+        <FormSection title='Route diagram' titleElement='h2'>
           <FormGroup
             hasNoPaddingTop
             label='Maximum label width'
@@ -98,6 +69,37 @@ export const CamelPreferences: React.FunctionComponent = () => {
             />
           </FormGroup>
         </FormSection>
+        <FormSection title='Trace / debug' titleElement='h2'>
+          <FormGroup
+            hasNoPaddingTop
+            label='Include streams'
+            fieldId='camel-form-include-streams'
+            labelIcon={
+              <TooltipHelpIcon tooltip='Whether to include stream based message body when using the tracer and debugger' />
+            }
+          >
+            <Checkbox
+              id='camel-form-include-streams-input'
+              isChecked={options.traceOrDebugIncludeStreams}
+              onChange={updateCheckboxValueFor('traceOrDebugIncludeStreams')}
+            />
+          </FormGroup>
+          <FormGroup
+            hasNoPaddingTop
+            label='Maximum body length'
+            fieldId='camel-form-maximum-body-length'
+            labelIcon={
+              <TooltipHelpIcon tooltip='The maximum length of the body before its clipped when using the tracer and debugger' />
+            }
+          >
+            <TextInput
+              id='camel-form-maximum-body-length-input'
+              type='number'
+              value={options.maximumTraceOrDebugBodyLength}
+              onChange={updateNumberValueFor('maximumTraceOrDebugBodyLength')}
+            />
+          </FormGroup>
+        </FormSection>
       </Form>
     </CardBody>
   )

diff --git a/packages/hawtio/src/plugins/camel/camel-preferences-service.ts b/packages/hawtio/src/plugins/camel/camel-preferences-service.ts
@@ -3,6 +3,7 @@ export type CamelOptions = {
   ignoreIdForLabel: boolean
   showInflightCounter: boolean // TODO: Not used yet
   maximumLabelWidth: number
+
   // Trace / debug
   maximumTraceOrDebugBodyLength: number
   traceOrDebugIncludeStreams: boolean