Skip to content

Commit 7a66e3e

Browse files
haohanyanghaohanyang
committed
Inline setting methods
1 parent ec5ffe5 commit 7a66e3e

File tree

1 file changed

+120
-150
lines changed

1 file changed

+120
-150
lines changed

‎src/components/ConfigEditor.tsx‎

Lines changed: 120 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
Input,
99
RadioButtonGroup,
1010
SecretInput,
11-
Checkbox,
1211
} from '@grafana/ui';
1312
import { DataSourcePluginOptionsEditorProps, SelectableValue } from '@grafana/data';
1413
import {
@@ -18,7 +17,7 @@ import {
1817
ConnectionStringScheme,
1918
} from '../types';
2019

21-
interface Props extends DataSourcePluginOptionsEditorProps<MongoDataSourceOptions, MongoDataSourceSecureJsonData> { }
20+
interface Props extends DataSourcePluginOptionsEditorProps<MongoDataSourceOptions, MongoDataSourceSecureJsonData> {}
2221

2322
const mongoDBAuthMethods: SelectableValue[] = [
2423
{ label: 'None', value: MongoDBAuthMethod.NONE },
@@ -47,119 +46,56 @@ export function ConfigEditor(props: Props) {
4746
jsonData.connectionStringScheme = ConnectionStringScheme.STANDARD;
4847
}
4948

50-
const onHostChange = (event: ChangeEvent<HTMLInputElement>) => {
51-
onOptionsChange({
52-
...options,
53-
jsonData: {
54-
...jsonData,
55-
host: event.target.value,
56-
},
57-
});
58-
};
59-
60-
const onUsernameChange = (event: ChangeEvent<HTMLInputElement>) => {
61-
onOptionsChange({
62-
...options,
63-
jsonData: {
64-
...jsonData,
65-
username: event.target.value,
66-
},
67-
});
68-
};
69-
70-
const onConnectionParametersChange = (event: ChangeEvent<HTMLInputElement>) => {
71-
onOptionsChange({
72-
...options,
73-
jsonData: {
74-
...jsonData,
75-
connectionParameters: event.target.value,
76-
},
77-
});
78-
};
79-
80-
const onPortChange = (event: ChangeEvent<HTMLInputElement>) => {
81-
onOptionsChange({
82-
...options,
83-
jsonData: {
84-
...jsonData,
85-
port: event.target.valueAsNumber,
86-
},
87-
});
88-
};
89-
90-
const onDatabaseChange = (event: ChangeEvent<HTMLInputElement>) => {
91-
onOptionsChange({
92-
...options,
93-
jsonData: {
94-
...jsonData,
95-
database: event.target.value,
96-
},
97-
});
98-
};
99-
100-
const onAuthTypeChange = (authType: string) => {
101-
onOptionsChange({
102-
...options,
103-
jsonData: {
104-
...jsonData,
105-
authType: authType,
106-
},
107-
});
108-
};
109-
110-
const onConnectionStringSchemeChange = (scheme: string) => {
111-
onOptionsChange({
112-
...options,
113-
jsonData: {
114-
...jsonData,
115-
connectionStringScheme: scheme,
116-
},
117-
});
118-
};
119-
120-
const onPasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
121-
onOptionsChange({
122-
...options,
123-
secureJsonData: {
124-
password: event.target.value,
125-
},
126-
});
127-
};
128-
129-
const onResetPassword = () => {
130-
onOptionsChange({
131-
...options,
132-
secureJsonFields: {
133-
...options.secureJsonFields,
134-
password: false,
135-
},
136-
secureJsonData: {
137-
...options.secureJsonData,
138-
password: '',
139-
},
140-
});
141-
};
142-
14349
return (
14450
<>
14551
<Field label="Connection string scheme">
14652
<RadioButtonGroup
14753
options={mongoConnectionStringSchemes}
14854
value={jsonData.connectionStringScheme || ConnectionStringScheme.STANDARD}
149-
onChange={onConnectionStringSchemeChange}
55+
onChange={(scheme: string) => {
56+
onOptionsChange({
57+
...options,
58+
jsonData: {
59+
...jsonData,
60+
connectionStringScheme: scheme,
61+
},
62+
});
63+
}}
15064
/>
15165
</Field>
15266
<InlineFieldRow label="Connection">
15367
<InlineField label="Host" tooltip="MongoDB host address">
154-
<Input required id="config-editor-host" value={jsonData.host} onChange={onHostChange} width={30}></Input>
68+
<Input
69+
required
70+
id="config-editor-host"
71+
value={jsonData.host}
72+
onChange={(event: ChangeEvent<HTMLInputElement>) => {
73+
onOptionsChange({
74+
...options,
75+
jsonData: {
76+
...jsonData,
77+
host: event.target.value,
78+
},
79+
});
80+
}}
81+
width={30}
82+
></Input>
15583
</InlineField>
15684
{jsonData.connectionStringScheme === ConnectionStringScheme.STANDARD && (
15785
<InlineField label="Port" tooltip="MongoDB port">
15886
<Input
15987
id="config-editor-port"
16088
value={jsonData.port}
16189
type="number"
162-
onChange={onPortChange}
90+
onChange={(event: ChangeEvent<HTMLInputElement>) => {
91+
onOptionsChange({
92+
...options,
93+
jsonData: {
94+
...jsonData,
95+
port: event.target.valueAsNumber,
96+
},
97+
});
98+
}}
16399
width={15}
164100
defaultValue={27017}
165101
></Input>
@@ -172,7 +108,15 @@ export function ConfigEditor(props: Props) {
172108
required
173109
id="config-editor-database"
174110
value={jsonData.database}
175-
onChange={onDatabaseChange}
111+
onChange={(event: ChangeEvent<HTMLInputElement>) => {
112+
onOptionsChange({
113+
...options,
114+
jsonData: {
115+
...jsonData,
116+
database: event.target.value,
117+
},
118+
});
119+
}}
176120
width={30}
177121
></Input>
178122
</InlineField>
@@ -185,7 +129,15 @@ export function ConfigEditor(props: Props) {
185129
required
186130
id="config-editor-connection-parameters"
187131
value={jsonData.connectionParameters}
188-
onChange={onConnectionParametersChange}
132+
onChange={(event: ChangeEvent<HTMLInputElement>) => {
133+
onOptionsChange({
134+
...options,
135+
jsonData: {
136+
...jsonData,
137+
connectionParameters: event.target.value,
138+
},
139+
});
140+
}}
189141
width={35}
190142
></Input>
191143
</InlineField>
@@ -195,7 +147,15 @@ export function ConfigEditor(props: Props) {
195147
<RadioButtonGroup
196148
options={mongoDBAuthMethods}
197149
value={jsonData.authType || MongoDBAuthMethod.NONE}
198-
onChange={onAuthTypeChange}
150+
onChange={(authType: string) => {
151+
onOptionsChange({
152+
...options,
153+
jsonData: {
154+
...jsonData,
155+
authType: authType,
156+
},
157+
});
158+
}}
199159
/>
200160
</Field>
201161
</FieldSet>
@@ -207,7 +167,15 @@ export function ConfigEditor(props: Props) {
207167
required
208168
id="config-editor-username"
209169
value={jsonData.username}
210-
onChange={onUsernameChange}
170+
onChange={(evt: ChangeEvent<HTMLInputElement>) => {
171+
onOptionsChange({
172+
...options,
173+
jsonData: {
174+
...jsonData,
175+
username: evt.target.value,
176+
},
177+
});
178+
}}
211179
width={35}
212180
></Input>
213181
</InlineField>
@@ -218,57 +186,80 @@ export function ConfigEditor(props: Props) {
218186
isConfigured={secureJsonFields.password}
219187
value={secureJsonData?.password || ''}
220188
width={35}
221-
onReset={onResetPassword}
222-
onChange={onPasswordChange}
189+
onReset={() => {
190+
onOptionsChange({
191+
...options,
192+
secureJsonFields: {
193+
...options.secureJsonFields,
194+
password: false,
195+
},
196+
secureJsonData: {
197+
...options.secureJsonData,
198+
password: '',
199+
},
200+
});
201+
}}
202+
onChange={(event: ChangeEvent<HTMLInputElement>) => {
203+
onOptionsChange({
204+
...options,
205+
secureJsonData: {
206+
password: event.target.value,
207+
},
208+
});
209+
}}
223210
/>
224211
</InlineField>
225212
</>
226213
)}
227214

228215
{jsonData.authType === MongoDBAuthMethod.TLS_SSL && (
229216
<>
230-
<Field label="Certificate Authority">
217+
<Field label="Certificate Authority" description="Path to Certificate Authority (.pem)">
231218
<Input
232219
required
233220
id="config-editor-tls-ca"
234221
value={jsonData.caCertPath}
235-
onChange={(evt: ChangeEvent<HTMLInputElement>) => onOptionsChange({
236-
...options,
237-
jsonData: {
238-
...jsonData,
239-
caCertPath: evt.target.value,
240-
},
241-
})}
242-
222+
onChange={(evt: ChangeEvent<HTMLInputElement>) =>
223+
onOptionsChange({
224+
...options,
225+
jsonData: {
226+
...jsonData,
227+
caCertPath: evt.target.value,
228+
},
229+
})
230+
}
243231
></Input>
244232
</Field>
245233
<Field label="Client Certificate" description="Path to public client certificate (.pem)">
246234
<Input
247235
required
248236
id="config-editor-tls-cc"
249237
value={jsonData.clientCertPath}
250-
onChange={(evt: ChangeEvent<HTMLInputElement>) => onOptionsChange({
251-
...options,
252-
jsonData: {
253-
...jsonData,
254-
clientCertPath: evt.target.value,
255-
},
256-
})}
257-
238+
onChange={(evt: ChangeEvent<HTMLInputElement>) =>
239+
onOptionsChange({
240+
...options,
241+
jsonData: {
242+
...jsonData,
243+
clientCertPath: evt.target.value,
244+
},
245+
})
246+
}
258247
></Input>
259248
</Field>
260249
<Field label="Client Key" description="Path to private client key (.pem)">
261250
<Input
262251
required
263252
id="config-editor-tls-ck"
264253
value={jsonData.clientKeyPath}
265-
onChange={(evt: ChangeEvent<HTMLInputElement>) => onOptionsChange({
266-
...options,
267-
jsonData: {
268-
...jsonData,
269-
clientKeyPath: evt.target.value,
270-
},
271-
})}
254+
onChange={(evt: ChangeEvent<HTMLInputElement>) =>
255+
onOptionsChange({
256+
...options,
257+
jsonData: {
258+
...jsonData,
259+
clientKeyPath: evt.target.value,
260+
},
261+
})
262+
}
272263
></Input>
273264
</Field>
274265
<Field label="Client Key Password">
@@ -301,29 +292,8 @@ export function ConfigEditor(props: Props) {
301292
}
302293
/>
303294
</Field>
304-
<Checkbox
305-
value={false}
306-
label="tlsInsecure"
307-
description="This includes tlsAllowInvalidHostnames and tlsAllowInvalidCertificates."
308-
/>
309-
<Checkbox
310-
value={false}
311-
label="tlsAllowInvalidHostnames"
312-
description="Disable the validation of the hostnames in the certificate presented by the mongod/mongos instance."
313-
/>
314-
<Checkbox
315-
value={false}
316-
label="tlsAllowInvalidCertificates"
317-
description="This includes tlsAllowInvalidHostnames and tlsAllowInvalidCertificates."
318-
/>
319-
<Checkbox
320-
value={false}
321-
label="tlsInsecure"
322-
description="Disable the validation of the server certificates."
323-
/>
324295
</>
325-
)
326-
}
296+
)}
327297
</>
328298
);
329299
}

0 commit comments

Comments
 (0)