forked from grafana/grafana
-
Notifications
You must be signed in to change notification settings - Fork 0
/
TLSAuthSettings.tsx
88 lines (81 loc) · 3.07 KB
/
TLSAuthSettings.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import React from 'react';
import { KeyValue } from '@grafana/data';
import { css, cx } from 'emotion';
import { Tooltip } from '../Tooltip/Tooltip';
import { Icon } from '../Icon/Icon';
import { CertificationKey } from './CertificationKey';
import { HttpSettingsBaseProps } from './types';
export const TLSAuthSettings: React.FC<HttpSettingsBaseProps> = ({ dataSourceConfig, onChange }) => {
const hasTLSCACert = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsCACert;
const hasTLSClientCert = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsClientCert;
const hasTLSClientKey = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsClientKey;
const onResetClickFactory = (field: string) => (event: React.MouseEvent<HTMLAnchorElement>) => {
event.preventDefault();
const newSecureJsonFields: KeyValue<boolean> = { ...dataSourceConfig.secureJsonFields };
newSecureJsonFields[field] = false;
onChange({
...dataSourceConfig,
secureJsonFields: newSecureJsonFields,
});
};
const onCertificateChangeFactory = (field: string) => (event: React.SyntheticEvent<HTMLTextAreaElement>) => {
const newSecureJsonData = { ...dataSourceConfig.secureJsonData };
newSecureJsonData[field] = event.currentTarget.value;
onChange({
...dataSourceConfig,
secureJsonData: newSecureJsonData,
});
};
return (
<div className="gf-form-group">
<div
className={cx(
'gf-form',
css`
align-items: baseline;
`
)}
>
<h6>TLS Auth Details</h6>
<Tooltip
placement="right-end"
content="TLS Certs are encrypted and stored in the Grafana database."
theme="info"
>
<div className="gf-form-help-icon gf-form-help-icon--right-normal">
<Icon name="info-circle" size="xs" style={{ marginLeft: '10px' }} />
</div>
</Tooltip>
</div>
<div>
{dataSourceConfig.jsonData.tlsAuthWithCACert && (
<CertificationKey
hasCert={!!hasTLSCACert}
onChange={onCertificateChangeFactory('tlsCACert')}
placeholder="Begins with -----BEGIN CERTIFICATE-----"
label="CA Cert"
onClick={onResetClickFactory('tlsCACert')}
/>
)}
{dataSourceConfig.jsonData.tlsAuth && (
<>
<CertificationKey
hasCert={!!hasTLSClientCert}
label="Client Cert"
onChange={onCertificateChangeFactory('tlsClientCert')}
placeholder="Begins with -----BEGIN CERTIFICATE-----"
onClick={onResetClickFactory('tlsClientCert')}
/>
<CertificationKey
hasCert={!!hasTLSClientKey}
label="Client Key"
placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----"
onChange={onCertificateChangeFactory('tlsClientKey')}
onClick={onResetClickFactory('tlsClientKey')}
/>
</>
)}
</div>
</div>
);
};