Skip to content

Commit

Permalink
refactor(camel): simplify camel preferences and its service
Browse files Browse the repository at this point in the history
  • Loading branch information
@tadayosi
tadayosi committed Nov 2, 2023
1 parent 41acaab commit 7fcfd18
Show file tree
Hide file tree
Showing 5 changed files with 203 additions and 206 deletions.
297 changes: 143 additions & 154 deletions packages/hawtio/src/plugins/camel/CamelPreferences.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,167 +4,156 @@ import React, { useState } from 'react'
import './CamelPreferences.css'
import { CamelOptions, camelPreferencesService } from './camel-preferences-service'

export const CamelPreferences: React.FunctionComponent = () => (
<CardBody>
<Form isHorizontal>
<CamelPreferencesForm />
</Form>
</CardBody>
)
export const CamelPreferences: React.FunctionComponent = () => {
const [options, setOptions] = useState(camelPreferencesService.loadOptions())

const CamelPreferencesForm: React.FunctionComponent = () => {
const [camelPreferences, setCamelPreferences] = useState(camelPreferencesService.loadCamelPreferences())

const updatePreferences = (value: boolean | number, key: keyof CamelOptions): void => {
const updatedPreferences = { ...camelPreferences, ...{ [key]: value } }

camelPreferencesService.saveCamelPreferences(updatedPreferences)
setCamelPreferences(updatedPreferences)
const updateOptions = (key: keyof CamelOptions, value: boolean | number) => {
const updated = { ...options, ...{ [key]: value } }
camelPreferencesService.saveOptions(updated)
setOptions(updated)
}

const updateNumberValueFor = (key: keyof CamelOptions): ((value: string) => void) => {
//Returning an arrow function to reduce boilerplate
return (value: string) => {
const intValue = parseInt(value)

if (!intValue) return

updatePreferences(intValue, key)
}
const updateNumberValueFor = (key: keyof CamelOptions) => (value: string) => {
const intValue = parseInt(value)
if (!intValue) return
updateOptions(key, intValue)
}

const updateCheckboxValueFor = (key: keyof CamelOptions): ((value: boolean, _: React.FormEvent) => void) => {
//Utility function generator to reduce boilerplate
return (value: boolean, _: React.FormEvent) => {
updatePreferences(value, key)
}
const updateCheckboxValueFor = (key: keyof CamelOptions) => (value: boolean) => {
updateOptions(key, value)
}

return (
<FormSection title='Camel' titleElement='h2'>
<FormGroup
hasNoPaddingTop
label='Hide option documentation'
fieldId='camel-form-hide-option-documentation'
labelIcon={
<TooltipHelpIcon tooltip='Whether to hide documentation in the properties view and Camel route editor' />
}
>
<Checkbox
id='camel-form-hide-option-documentation'
isChecked={camelPreferences.isHideOptionDocumentation}
onChange={updateCheckboxValueFor('isHideOptionDocumentation')}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label='Hide default options values'
fieldId='camel-form-hide-default-option-value'
labelIcon={
<TooltipHelpIcon tooltip='Whether to hide options that are using a default value in the properties view' />
}
>
<Checkbox
id='camel-form-hide-default-option-value'
isChecked={camelPreferences.isHideDefaultOptionValues}
onChange={updateCheckboxValueFor('isHideDefaultOptionValues')}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label='Hide unused options values'
fieldId='camel-form-hide-unused-option-value'
labelIcon={<TooltipHelpIcon tooltip='Whether to hide unused/empty options in the properties view' />}
>
<Checkbox
id='camel-form-hide-unused-option-value'
isChecked={camelPreferences.isHideUnusedOptionValues}
onChange={updateCheckboxValueFor('isHideUnusedOptionValues')}
/>
</FormGroup>
<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'
isChecked={camelPreferences.isIncludeTraceDebugStreams}
onChange={updateCheckboxValueFor('isIncludeTraceDebugStreams')}
/>
</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={camelPreferences.maximumTraceDebugBodyLength}
onChange={updateNumberValueFor('maximumTraceDebugBodyLength')}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label='Maximum label width'
fieldId='camel-form-maximum-label-width'
labelIcon={<TooltipHelpIcon tooltip='The maximum length of a label in Camel diagrams before it is clipped' />}
>
<TextInput
id='camel-form-maximum-label-width'
type='number'
value={camelPreferences.maximumLabelWidth}
onChange={updateNumberValueFor('maximumLabelWidth')}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label='Ignore ID for label'
fieldId='camel-form-ignore-id-for-label'
labelIcon={
<TooltipHelpIcon tooltip='If enabled then we will ignore the ID value when viewing a pattern in a Camel diagram; otherwise we will use the ID value as the label (the tooltip will show the actual detail' />
}
>
<Checkbox
id='camel-form-ignore-id-for-label'
isChecked={camelPreferences.isIgnoreIDForLabel}
onChange={updateCheckboxValueFor('isIgnoreIDForLabel')}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label='Show inflight counter'
fieldId='camel-show-inflight-counter'
labelIcon={<TooltipHelpIcon tooltip='Whether to show inflight counter in route diagram' />}
>
<Checkbox
id='camel-show-inflight-counter'
isChecked={camelPreferences.isShowInflightCounter}
onChange={updateCheckboxValueFor('isShowInflightCounter')}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label='Route metric maximum seconds'
fieldId='camel-form-route-metric-maximum-seconds'
labelIcon={
<TooltipHelpIcon tooltip='The maximum value in seconds used by the route metrics duration and histogram charts' />
}
>
<TextInput
id='camel-form-route-metric-maximum-seconds'
type='number'
value={camelPreferences.routeMetricMaximumSeconds}
onChange={updateNumberValueFor('routeMetricMaximumSeconds')}
/>
</FormGroup>
</FormSection>
<CardBody>
<Form isHorizontal>
<FormSection>
<FormGroup
hasNoPaddingTop
label='Hide option documentation'
fieldId='camel-form-hide-option-documentation'
labelIcon={
<TooltipHelpIcon tooltip='Whether to hide documentation in the properties view and Camel route editor' />
}
>
<Checkbox
id='camel-form-hide-option-documentation-input'
isChecked={options.hideOptionDocumentation}
onChange={updateCheckboxValueFor('hideOptionDocumentation')}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label='Hide default options values'
fieldId='camel-form-hide-default-option-values'
labelIcon={
<TooltipHelpIcon tooltip='Whether to hide options that are using a default value in the properties view' />
}
>
<Checkbox
id='camel-form-hide-default-option-values-input'
isChecked={options.hideOptionDefaultValue}
onChange={updateCheckboxValueFor('hideOptionDefaultValue')}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label='Hide unused options values'
fieldId='camel-form-hide-unused-option-values'
labelIcon={<TooltipHelpIcon tooltip='Whether to hide unused/empty options in the properties view' />}
>
<Checkbox
id='camel-form-hide-unused-option-values-input'
isChecked={options.hideOptionUnusedValue}
onChange={updateCheckboxValueFor('hideOptionUnusedValue')}
/>
</FormGroup>
<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>
<FormGroup
hasNoPaddingTop
label='Maximum label width'
fieldId='camel-form-maximum-label-width'
labelIcon={
<TooltipHelpIcon tooltip='The maximum length of a label in Camel diagrams before it is clipped' />
}
>
<TextInput
id='camel-form-maximum-label-width-input'
type='number'
value={options.maximumLabelWidth}
onChange={updateNumberValueFor('maximumLabelWidth')}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label='Ignore ID for label'
fieldId='camel-form-ignore-id-for-label'
labelIcon={
<TooltipHelpIcon tooltip='If enabled then we will ignore the ID value when viewing a pattern in a Camel diagram; otherwise we will use the ID value as the label (the tooltip will show the actual detail)' />
}
>
<Checkbox
id='camel-form-ignore-id-for-label-input'
isChecked={options.ignoreIdForLabel}
onChange={updateCheckboxValueFor('ignoreIdForLabel')}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label='Show inflight counter'
fieldId='camel-show-inflight-counter'
labelIcon={<TooltipHelpIcon tooltip='Whether to show inflight counter in route diagram' />}
>
<Checkbox
id='camel-show-inflight-counter-input'
isChecked={options.showInflightCounter}
onChange={updateCheckboxValueFor('showInflightCounter')}
/>
</FormGroup>
<FormGroup
hasNoPaddingTop
label='Route metric maximum seconds'
fieldId='camel-form-route-metric-maximum-seconds'
labelIcon={
<TooltipHelpIcon tooltip='The maximum value in seconds used by the route metrics duration and histogram charts' />
}
>
<TextInput
id='camel-form-route-metric-maximum-seconds-input'
type='number'
value={options.routeMetricMaximumSeconds}
onChange={updateNumberValueFor('routeMetricMaximumSeconds')}
/>
</FormGroup>
</FormSection>
</Form>
</CardBody>
)
}
Loading

0 comments on commit 7fcfd18

Please sign in to comment.