Skip to content

Commit ea185d7

Browse files
jpinsonneaujpinsonneau
committed
custom widget for secondary interfaces
1 parent d1ffcce commit ea185d7

File tree

13 files changed

+111
-33
lines changed

13 files changed

+111
-33
lines changed

‎web/package-lock.json‎

Lines changed: 11 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"@types/jest": "30.0.0",
4343
"@types/js-yaml": "^4.0.9",
4444
"@types/jsdom": "^16.2.13",
45-
"@types/lodash": "^4.14.178",
45+
"@types/lodash": "^4.17.20",
4646
"@types/murmurhash-js": "^1.0.3",
4747
"@types/port-numbers": "^5.0.0",
4848
"@types/react": "^17.0.1",
@@ -107,8 +107,8 @@
107107
"@patternfly/react-table": "^5.4.0",
108108
"@patternfly/react-tokens": "^5.4.0",
109109
"@patternfly/react-topology": "^5.4.0",
110-
"@rjsf/core": "^5.24.7",
111-
"@rjsf/validator-ajv8": "^5.24.7",
110+
"@rjsf/core": "^5.24.12",
111+
"@rjsf/validator-ajv8": "^5.24.12",
112112
"axios": "^1.8.2",
113113
"html-to-image": "^1.11.11",
114114
"i18next": "^21.8.14",

‎web/src/components/forms/config/uiSchema.ts‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -718,6 +718,24 @@ export const FlowCollectorUISchema: UiSchema = {
718718
},
719719
advanced: {
720720
'ui:title': 'Advanced configuration',
721+
port: {
722+
'ui:widget': 'hidden'
723+
},
724+
conversationTerminatingTimeout: {
725+
'ui:widget': 'hidden'
726+
},
727+
conversationEndTimeout: {
728+
'ui:widget': 'hidden'
729+
},
730+
profilePort: {
731+
'ui:widget': 'hidden'
732+
},
733+
env: {
734+
'ui:widget': 'hidden'
735+
},
736+
enableKubeProbes: {
737+
'ui:widget': 'hidden'
738+
},
721739
scheduling: {
722740
'ui:widget': 'hidden',
723741
'ui:order': ['affinity', 'nodeSelector', 'priorityClassName', 'tolerations'],
@@ -902,10 +920,27 @@ export const FlowCollectorUISchema: UiSchema = {
902920
}
903921
},
904922
secondaryNetworks: {
923+
'ui:title': 'Secondary networks',
905924
items: {
906-
'ui:order': ['index', 'name']
925+
name: {
926+
'ui:title': 'Name'
927+
},
928+
index: {
929+
'ui:title': 'Index',
930+
'ui:widget': 'arrayCheckboxes'
931+
},
932+
'ui:order': ['name', 'index']
907933
}
908934
},
935+
healthPort: {
936+
'ui:widget': 'hidden'
937+
},
938+
dropUnusedFields: {
939+
'ui:widget': 'hidden'
940+
},
941+
conversationHeartbeatInterval: {
942+
'ui:widget': 'hidden'
943+
},
909944
'ui:order': [
910945
'port',
911946
'conversationTerminatingTimeout',

‎web/src/components/forms/dynamic-form/templates.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,5 @@ export default {
159159
FieldTemplate,
160160
DescriptionFieldTemplate,
161161
ArrayFieldTemplate,
162-
ObjectFieldTemplate,
163-
map: FieldTemplate
162+
ObjectFieldTemplate
164163
};

‎web/src/components/forms/dynamic-form/widgets.tsx‎

Lines changed: 59 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
import { CodeEditor, Language } from '@patternfly/react-code-editor';
2-
import { Dropdown, DropdownItem, MenuToggle, MenuToggleElement, Switch } from '@patternfly/react-core';
2+
import {
3+
Checkbox,
4+
Dropdown,
5+
DropdownItem,
6+
Flex,
7+
FlexItem,
8+
MenuToggle,
9+
MenuToggleElement,
10+
Switch
11+
} from '@patternfly/react-core';
312
import { getSchemaType, WidgetProps } from '@rjsf/utils';
413
import classNames from 'classnames';
514
import * as _ from 'lodash';
615
import * as React from 'react';
716
import { useTranslation } from 'react-i18next';
817
import { useTheme } from '../../../utils/theme-hook';
918
import { JSON_SCHEMA_NUMBER_TYPES } from './const';
19+
import { AtomicFieldTemplate } from './templates';
1020

1121
export const TextWidget: React.FC<WidgetProps> = props => {
1222
const { disabled = false, id, onBlur, onChange, onFocus, readonly = false, schema = {}, value = '' } = props;
@@ -148,6 +158,52 @@ export const JSONWidget: React.FC<WidgetProps> = props => {
148158
);
149159
};
150160

161+
export const ArrayCheckboxesWidget: React.FC<WidgetProps> = props => {
162+
const { schema, value, id, onBlur, onChange, onFocus } = props;
163+
164+
const errFunc = () => console.error('Function not implemented.');
165+
166+
return (
167+
// since schema type is 'array' and widget is 'checkboxes', we use AtomicFieldTemplate
168+
// to render the field and values all at once without the add/remove buttons
169+
<AtomicFieldTemplate
170+
onKeyChange={() => errFunc}
171+
onDropPropertyClick={() => errFunc}
172+
{...{
173+
...props,
174+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
175+
style: props.style as React.StyleHTMLAttributes<any> | undefined,
176+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
177+
description: (schema.items as any)?.description || props.description,
178+
readonly: props.readonly === true,
179+
disabled: props.disabled === true
180+
}}
181+
>
182+
<Flex direction={{ default: 'row' }} onBlur={() => onBlur(id, value)} onFocus={() => onFocus(id, value)}>
183+
{
184+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
185+
(schema.items as any).enum.map((option: string, index: number) => (
186+
<FlexItem key={`${id}-${index}`}>
187+
<Checkbox
188+
id={`${id}-${index}`}
189+
label={option}
190+
isChecked={_.isNil(value) ? false : value.includes(option)}
191+
onClick={() =>
192+
onChange(
193+
value.includes(option) ? value.filter((v: string) => v !== option) : [...value, option],
194+
undefined,
195+
id
196+
)
197+
}
198+
/>
199+
</FlexItem>
200+
))
201+
}
202+
</Flex>
203+
</AtomicFieldTemplate>
204+
);
205+
};
206+
151207
export default {
152208
BaseInput: TextWidget,
153209
CheckboxWidget: SwitchWidget, // force using switch everywhere for consistency
@@ -158,5 +214,6 @@ export default {
158214
TextWidget,
159215
int32: NumberWidget,
160216
int64: NumberWidget,
161-
map: JSONWidget
217+
map: JSONWidget,
218+
arrayCheckboxes: ArrayCheckboxesWidget
162219
};

‎web/src/components/forms/flowCollector-status.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@ import { Consumer, ResourceWatcher } from './resource-watcher';
1212
export type FlowCollectorStatusProps = {};
1313

1414
export const FlowCollectorStatus: FC<FlowCollectorStatusProps> = props => {
15-
console.log('FlowCollectorStatus', props);
16-
1715
const { t } = useTranslation('plugin__netobserv-plugin');
1816
const [selectedTypes, setSelectedTypes] = React.useState<string[]>([]);
1917

‎web/src/components/forms/flowCollector-wizard.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ export type FlowCollectorWizardProps = {};
2222
const defaultPaths = ['spec.namespace', 'spec.networkPolicy'];
2323

2424
export const FlowCollectorWizard: FC<FlowCollectorWizardProps> = props => {
25-
console.log('FlowCollectorWizard', props);
26-
2725
const { t } = useTranslation('plugin__netobserv-plugin');
2826
const [data, setData] = React.useState<any>(null);
2927
const [paths, setPaths] = React.useState<string[]>(defaultPaths);
@@ -37,7 +35,6 @@ export const FlowCollectorWizard: FC<FlowCollectorWizardProps> = props => {
3735
uiSchema={filteredSchema} // see if we can regenerate this from CSV
3836
validator={validator}
3937
onChange={(event, id) => {
40-
console.log('onChange', event, id);
4138
setData(event.formData);
4239
}}
4340
/>
@@ -85,6 +82,7 @@ export const FlowCollectorWizard: FC<FlowCollectorWizardProps> = props => {
8582
'spec.processor.kafkaConsumerAutoscaler',
8683
'spec.processor.kafkaConsumerReplicas',
8784
'spec.processor.kafkaConsumerBatchSize',
85+
'spec.processor.advanced.secondaryNetworks.items',
8886
'spec.exporters.items'
8987
]);
9088
break;

‎web/src/components/forms/flowCollector.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ import { ResourceWatcher } from './resource-watcher';
1010
export type FlowCollectorFormProps = {};
1111

1212
export const FlowCollectorForm: FC<FlowCollectorFormProps> = props => {
13-
console.log('FlowCollectorForm', props);
14-
1513
return (
1614
<DynamicLoader>
1715
<ResourceWatcher defaultData={GetFlowCollectorJS()}>

‎web/src/components/forms/flowMetric-wizard.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@ export type FlowMetricWizardProps = {};
2020
const defaultPaths = ['metadata.namespace', 'metadata.name'];
2121

2222
export const FlowMetricWizard: FC<FlowMetricWizardProps> = props => {
23-
console.log('FlowMetricWizard', props);
24-
2523
const { t } = useTranslation('plugin__netobserv-plugin');
2624
const [data, setData] = React.useState<any>(null);
2725
const [paths, setPaths] = React.useState<string[]>(defaultPaths);
@@ -35,7 +33,6 @@ export const FlowMetricWizard: FC<FlowMetricWizardProps> = props => {
3533
uiSchema={filteredSchema} // see if we can regenerate this from CSV
3634
validator={validator}
3735
onChange={(event, id) => {
38-
console.log('onChange', event, id);
3936
setData(event.formData);
4037
}}
4138
/>

‎web/src/components/forms/flowMetric.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ import { ResourceWatcher } from './resource-watcher';
1010
export type FlowMetricFormProps = {};
1111

1212
export const FlowMetricForm: FC<FlowMetricFormProps> = props => {
13-
console.log('FlowMetricForm', props);
14-
1513
return (
1614
<DynamicLoader>
1715
<ResourceWatcher defaultData={GetFlowMetricJS()}>

0 commit comments

Comments
 (0)