Skip to content

Commit b441051

Browse files
lpetroralpetrora
committed
Change class component ConfigEditor to functional component
CMK-15466
1 parent 5b35a6d commit b441051

File tree

1 file changed

+175
-161
lines changed

1 file changed

+175
-161
lines changed

‎src/ui/ConfigEditor.tsx‎

Lines changed: 175 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { DataSourcePluginOptionsEditorProps, SelectableValue } from '@grafana/data';
22
import { Alert, FieldSet, InlineField, LegacyForms, Select } from '@grafana/ui';
3-
import React, { ChangeEvent, PureComponent } from 'react';
3+
import React, { ChangeEvent, useCallback } from 'react';
44

55
import { Backend, DataSourceOptions, Edition, SecureJsonData } from '../types';
66

@@ -9,61 +9,88 @@ const { SecretFormField, FormField } = LegacyForms;
99
// eslint-disable-next-line @typescript-eslint/no-empty-interface
1010
interface Props extends DataSourcePluginOptionsEditorProps<DataSourceOptions, SecureJsonData> {}
1111

12-
// eslint-disable-next-line @typescript-eslint/no-empty-interface
13-
interface State {}
14-
15-
export class ConfigEditor extends PureComponent<Props, State> {
16-
onUrlChange = (event: ChangeEvent<HTMLInputElement>): void => {
17-
const { onOptionsChange, options } = this.props;
18-
const jsonData = {
19-
...options.jsonData,
20-
url: event.target.value,
21-
};
22-
onOptionsChange({ ...options, jsonData });
23-
};
24-
25-
onEditionChange = ({ value }: SelectableValue<Edition>): void => {
26-
const { onOptionsChange, options } = this.props;
27-
const jsonData = {
28-
...options.jsonData,
29-
edition: value,
30-
};
31-
onOptionsChange({ ...options, jsonData });
32-
};
33-
34-
onBackendChange = ({ value }: SelectableValue<Backend>): void => {
35-
const { onOptionsChange, options } = this.props;
36-
onOptionsChange({
37-
...options,
38-
jsonData: {
12+
interface EditionOption {
13+
value: Edition;
14+
label: string;
15+
}
16+
17+
const cmkEditions: EditionOption[] = [
18+
{ value: 'CEE', label: 'Commercial editions' },
19+
{ value: 'RAW', label: 'Raw Edition' },
20+
];
21+
22+
const cmkBackends: Array<SelectableValue<Backend>> = [
23+
{ value: 'rest', label: '>= 2.2' },
24+
{ value: 'web', label: '< 2.2' },
25+
];
26+
27+
export const ConfigEditor = (props: Props) => {
28+
const onUrlChange = useCallback(
29+
(event: ChangeEvent<HTMLInputElement>): void => {
30+
const { onOptionsChange, options } = props;
31+
const jsonData = {
3932
...options.jsonData,
40-
backend: value,
41-
},
42-
});
43-
};
33+
url: event.target.value,
34+
};
35+
onOptionsChange({ ...options, jsonData });
36+
},
37+
[props]
38+
);
39+
40+
const onEditionChange = useCallback(
41+
({ value }: SelectableValue<Edition>): void => {
42+
const { onOptionsChange, options } = props;
43+
const jsonData = {
44+
...options.jsonData,
45+
edition: value,
46+
};
47+
onOptionsChange({ ...options, jsonData });
48+
},
49+
[props]
50+
);
51+
52+
const onBackendChange = useCallback(
53+
({ value }: SelectableValue<Backend>): void => {
54+
const { onOptionsChange, options } = props;
55+
onOptionsChange({
56+
...options,
57+
jsonData: {
58+
...options.jsonData,
59+
backend: value,
60+
},
61+
});
62+
},
63+
[props]
64+
);
4465

45-
onUsernameChange = (event: ChangeEvent<HTMLInputElement>): void => {
46-
const { onOptionsChange, options } = this.props;
47-
const jsonData = {
48-
...options.jsonData,
49-
username: event.target.value,
50-
};
51-
onOptionsChange({ ...options, jsonData });
52-
};
66+
const onUsernameChange = useCallback(
67+
(event: ChangeEvent<HTMLInputElement>): void => {
68+
const { onOptionsChange, options } = props;
69+
const jsonData = {
70+
...options.jsonData,
71+
username: event.target.value,
72+
};
73+
onOptionsChange({ ...options, jsonData });
74+
},
75+
[props]
76+
);
5377

5478
// Secure field (only sent to the backend)
55-
onSecretChange = (event: ChangeEvent<HTMLInputElement>): void => {
56-
const { onOptionsChange, options } = this.props;
57-
onOptionsChange({
58-
...options,
59-
secureJsonData: {
60-
secret: event.target.value,
61-
},
62-
});
63-
};
79+
const onSecretChange = useCallback(
80+
(event: ChangeEvent<HTMLInputElement>): void => {
81+
const { onOptionsChange, options } = props;
82+
onOptionsChange({
83+
...options,
84+
secureJsonData: {
85+
secret: event.target.value,
86+
},
87+
});
88+
},
89+
[props]
90+
);
6491

65-
onResetSecret = (): void => {
66-
const { onOptionsChange, options } = this.props;
92+
const onResetSecret = useCallback((): void => {
93+
const { onOptionsChange, options } = props;
6794
onOptionsChange({
6895
...options,
6996
secureJsonFields: {
@@ -75,114 +102,101 @@ export class ConfigEditor extends PureComponent<Props, State> {
75102
secret: '',
76103
},
77104
});
78-
};
79-
80-
render(): JSX.Element {
81-
const { options } = this.props;
82-
const { jsonData, secureJsonFields } = options;
83-
const secureJsonData = options.secureJsonData || {};
84-
interface EditionOption {
85-
value: Edition;
86-
label: string;
87-
}
88-
89-
const cmkEditions: EditionOption[] = [
90-
{ value: 'CEE', label: 'Commercial editions' },
91-
{ value: 'RAW', label: 'Raw Edition' },
92-
];
93-
if (!jsonData.edition) {
94-
this.onEditionChange(cmkEditions[0]);
95-
}
96-
const cmkBackends: Array<SelectableValue<Backend>> = [
97-
{ value: 'rest', label: '>= 2.2' },
98-
{ value: 'web', label: '< 2.2' },
99-
];
100-
if (!jsonData.backend) {
101-
this.onBackendChange(cmkBackends[0]);
102-
}
103-
104-
return (
105-
<>
106-
<FieldSet label="Monitoring Site">
107-
<div className="gf-form">
108-
<FormField
109-
label="URL"
110-
labelWidth={6}
111-
inputWidth={20}
112-
onChange={this.onUrlChange}
113-
value={jsonData.url || ''}
114-
tooltip="Which Checkmk Server to connect to. (Example: https://checkmk.server/site)"
115-
data-test-id="checkmk-url"
116-
/>
117-
</div>
118-
{process.env.BUILD_EDITION !== 'CLOUD' ? (
119-
<>
120-
<InlineField label="Edition" labelWidth={12}>
121-
<Select
122-
width={32}
123-
options={cmkEditions}
124-
onChange={this.onEditionChange}
125-
value={jsonData.edition}
126-
placeholder="Select your checkmk edition"
127-
inputId="checkmk-edition"
128-
/>
129-
</InlineField>
130-
<InlineField
131-
label="Version"
132-
labelWidth={12}
133-
tooltip="Choose the appropriate version for your Checkmk installation"
134-
>
135-
<Select
136-
width={32}
137-
options={cmkBackends}
138-
onChange={this.onBackendChange}
139-
value={jsonData.backend}
140-
placeholder="Select your checkmk version"
141-
inputId="checkmk-version"
142-
/>
143-
</InlineField>
144-
{jsonData.backend === 'web' && (
145-
<Alert title="Feature degration warning" severity="warning">
146-
Note that versions older than 2.1.0 are not officially supported:
147-
<ul>
148-
<li>- Version 2.0.0 may work, but not all features are available.</li>
149-
<li>- Version 1.6.0 and earlier will not work at all.</li>
150-
</ul>
151-
</Alert>
152-
)}
153-
</>
154-
) : (
155-
<></>
156-
)}
157-
</FieldSet>
158-
<FieldSet label="Authentication">
159-
<div className="gf-form">
160-
<FormField
161-
label="Username"
162-
labelWidth={6}
163-
inputWidth={20}
164-
onChange={this.onUsernameChange}
165-
value={jsonData.username || ''}
166-
tooltip="A checkmk monitoring user. Don't use 'automation' user, because it has admin rights."
167-
data-test-id="checkmk-username"
168-
/>
169-
</div>
170-
<div className="gf-form">
171-
<SecretFormField
172-
isConfigured={(secureJsonFields && secureJsonFields.secret) as boolean}
173-
value={secureJsonData.secret || ''}
174-
label="Secret"
175-
placeholder=""
176-
labelWidth={6}
177-
inputWidth={20}
178-
onReset={this.onResetSecret}
179-
onChange={this.onSecretChange}
180-
tooltip="You can find the secret for your user in your checkmk server under Users."
181-
data-test-id="checkmk-password"
182-
/>
183-
</div>
184-
</FieldSet>
185-
</>
186-
);
105+
}, [props]);
106+
107+
const { options } = props;
108+
const { jsonData, secureJsonFields } = options;
109+
const secureJsonData = options.secureJsonData || {};
110+
111+
if (!jsonData.edition) {
112+
onEditionChange(cmkEditions[0]);
187113
}
188-
}
114+
115+
if (!jsonData.backend) {
116+
onBackendChange(cmkBackends[0]);
117+
}
118+
119+
return (
120+
<>
121+
<FieldSet label="Monitoring Site">
122+
<div className="gf-form">
123+
<FormField
124+
label="URL"
125+
labelWidth={6}
126+
inputWidth={20}
127+
onChange={onUrlChange}
128+
value={jsonData.url || ''}
129+
tooltip="Which Checkmk Server to connect to. (Example: https://checkmk.server/site)"
130+
data-test-id="checkmk-url"
131+
/>
132+
</div>
133+
{process.env.BUILD_EDITION !== 'CLOUD' ? (
134+
<>
135+
<InlineField label="Edition" labelWidth={12}>
136+
<Select
137+
width={32}
138+
options={cmkEditions}
139+
onChange={onEditionChange}
140+
value={jsonData.edition}
141+
placeholder="Select your checkmk edition"
142+
inputId="checkmk-edition"
143+
/>
144+
</InlineField>
145+
<InlineField
146+
label="Version"
147+
labelWidth={12}
148+
tooltip="Choose the appropriate version for your Checkmk installation"
149+
>
150+
<Select
151+
width={32}
152+
options={cmkBackends}
153+
onChange={onBackendChange}
154+
value={jsonData.backend}
155+
placeholder="Select your checkmk version"
156+
inputId="checkmk-version"
157+
/>
158+
</InlineField>
159+
{jsonData.backend === 'web' && (
160+
<Alert title="Feature degration warning" severity="warning">
161+
Note that versions older than 2.1.0 are not officially supported:
162+
<ul>
163+
<li>- Version 2.0.0 may work, but not all features are available.</li>
164+
<li>- Version 1.6.0 and earlier will not work at all.</li>
165+
</ul>
166+
</Alert>
167+
)}
168+
</>
169+
) : (
170+
<></>
171+
)}
172+
</FieldSet>
173+
<FieldSet label="Authentication">
174+
<div className="gf-form">
175+
<FormField
176+
label="Username"
177+
labelWidth={6}
178+
inputWidth={20}
179+
onChange={onUsernameChange}
180+
value={jsonData.username || ''}
181+
tooltip="A checkmk monitoring user. Don't use 'automation' user, because it has admin rights."
182+
data-test-id="checkmk-username"
183+
/>
184+
</div>
185+
<div className="gf-form">
186+
<SecretFormField
187+
isConfigured={(secureJsonFields && secureJsonFields.secret) as boolean}
188+
value={secureJsonData.secret || ''}
189+
label="Secret"
190+
placeholder=""
191+
labelWidth={6}
192+
inputWidth={20}
193+
onReset={onResetSecret}
194+
onChange={onSecretChange}
195+
tooltip="You can find the secret for your user in your checkmk server under Users."
196+
data-test-id="checkmk-password"
197+
/>
198+
</div>
199+
</FieldSet>
200+
</>
201+
);
202+
};

0 commit comments

Comments
 (0)