public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prometheus: Disabled inputs when settings are read-only (#60354)

Browse Source
This commit is contained in:
Ludovic Viaud
2023-01-10 16:13:42 +01:00
committed by GitHub
parent 5d725d22ad
commit 220ee3d1d4
15 changed files with 135 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export function AlertingSettings<T extends AlertingConfig>({ options, onOptionsC
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form">
<InlineField labelWidth={26} label="Manage alerts via Alerting UI">
<InlineField labelWidth={26} label="Manage alerts via Alerting UI" disabled={options.readOnly}>
<InlineSwitch
value={options.jsonData.manageAlerts !== false}
onChange={(event) =>
packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx
+2 -2
View File
@@ -35,7 +35,7 @@ export const BasicAuthSettings: React.FC<HttpSettingsProps> = ({ dataSourceConfi
return (
<>
<InlineField>
<InlineField disabled={dataSourceConfig.readOnly}>
<FormField
label="User"
labelWidth={10}
@@ -45,7 +45,7 @@ export const BasicAuthSettings: React.FC<HttpSettingsProps> = ({ dataSourceConfi
onChange={(event) => onChange({ ...dataSourceConfig, basicAuthUser: event.currentTarget.value })}
/>
</InlineField>
<InlineField>
<InlineField disabled={dataSourceConfig.readOnly}>
<SecretFormField
isConfigured={!!(dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.basicAuthPassword)}
value={password || ''}
packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.test.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ const setup = (propOverrides?: object) => {
password: true,
},
secureJsonFields: {},
readOnly: true,
readOnly: false,
},
onChange,
...propOverrides,
packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx
+16 -12
View File
@@ -196,6 +196,8 @@ export class CustomHeadersSettings extends PureComponent<Props, State> {
render() {
const { headers } = this.state;
const { dataSourceConfig } = this.props;
return (
<div className={'gf-form-group'}>
<div className="gf-form">
@@ -215,18 +217,20 @@ export class CustomHeadersSettings extends PureComponent<Props, State> {
/>
))}
</div>
<div className="gf-form">
<Button
variant="secondary"
icon="plus"
type="button"
onClick={(e) => {
this.onHeaderAdd();
}}
>
Add header
</Button>
</div>
{!dataSourceConfig.readOnly && (
<div className="gf-form">
<Button
variant="secondary"
icon="plus"
type="button"
onClick={(e) => {
this.onHeaderAdd();
}}
>
Add header
</Button>
</div>
)}
</div>
);
}
packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
+8 -2
View File
@@ -113,6 +113,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
options={ACCESS_OPTIONS}
value={ACCESS_OPTIONS.filter((o) => o.value === dataSourceConfig.access)[0] || DEFAULT_ACCESS_OPTION}
onChange={(selectedValue) => onSettingsChange({ access: selectedValue.value })}
disabled={dataSourceConfig.readOnly}
/>
);
@@ -133,6 +134,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
value={dataSourceConfig.url}
aria-label={selectors.components.DataSource.DataSourceHttpSettings.urlInput}
onChange={(event) => onSettingsChange({ url: event.currentTarget.value })}
disabled={dataSourceConfig.readOnly}
/>
);
@@ -183,6 +185,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
onChange={(cookies) =>
onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } })
}
disabled={dataSourceConfig.readOnly}
/>
</div>
<div className="gf-form">
@@ -200,6 +203,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
jsonData: { ...dataSourceConfig.jsonData, timeout: parseInt(event.currentTarget.value, 10) },
});
}}
disabled={dataSourceConfig.readOnly}
/>
</div>
</div>
@@ -211,7 +215,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
<h3 className="page-heading">Auth</h3>
<div className="gf-form-group">
<div className="gf-form-inline">
<InlineField label="Basic auth" labelWidth={LABEL_WIDTH}>
<InlineField label="Basic auth" labelWidth={LABEL_WIDTH} disabled={dataSourceConfig.readOnly}>
<InlineSwitch
id="http-settings-basic-auth"
value={dataSourceConfig.basicAuth}
@@ -225,6 +229,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
label="With Credentials"
tooltip="Whether credentials such as cookies or auth headers should be sent with cross-site requests."
labelWidth={LABEL_WIDTH}
disabled={dataSourceConfig.readOnly}
>
<InlineSwitch
id="http-settings-with-credentials"
@@ -242,6 +247,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
label="Azure Authentication"
tooltip="Use Azure authentication for Azure endpoint."
labelWidth={LABEL_WIDTH}
disabled={dataSourceConfig.readOnly}
>
<InlineSwitch
id="http-settings-azure-auth"
@@ -258,7 +264,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
{sigV4AuthToggleEnabled && (
<div className="gf-form-inline">
<InlineField label="SigV4 auth" labelWidth={LABEL_WIDTH}>
<InlineField label="SigV4 auth" labelWidth={LABEL_WIDTH} disabled={dataSourceConfig.readOnly}>
<InlineSwitch
id="http-settings-sigv4-auth"
value={dataSourceConfig.jsonData.sigV4Auth || false}
packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx
+9 -3
View File
@@ -15,14 +15,19 @@ export const HttpProxySettings: React.FC<HttpSettingsBaseProps> = ({
return (
<>
<div className="gf-form-inline">
<InlineField label="TLS Client Auth" labelWidth={LABEL_WIDTH}>
<InlineField label="TLS Client Auth" labelWidth={LABEL_WIDTH} disabled={dataSourceConfig.readOnly}>
<InlineSwitch
id="http-settings-tls-client-auth"
value={dataSourceConfig.jsonData.tlsAuth || false}
onChange={(event) => onChange({ ...dataSourceConfig.jsonData, tlsAuth: event!.currentTarget.checked })}
/>
</InlineField>
<InlineField label="With CA Cert" tooltip="Needed for verifying self-signed TLS Certs" labelWidth={LABEL_WIDTH}>
<InlineField
label="With CA Cert"
tooltip="Needed for verifying self-signed TLS Certs"
labelWidth={LABEL_WIDTH}
disabled={dataSourceConfig.readOnly}
>
<InlineSwitch
id="http-settings-ca-cert"
value={dataSourceConfig.jsonData.tlsAuthWithCACert || false}
@@ -33,7 +38,7 @@ export const HttpProxySettings: React.FC<HttpSettingsBaseProps> = ({
</InlineField>
</div>
<div className="gf-form-inline">
<InlineField label="Skip TLS Verify" labelWidth={LABEL_WIDTH}>
<InlineField label="Skip TLS Verify" labelWidth={LABEL_WIDTH} disabled={dataSourceConfig.readOnly}>
<InlineSwitch
id="http-settings-skip-tls-verify"
value={dataSourceConfig.jsonData.tlsSkipVerify || false}
@@ -49,6 +54,7 @@ export const HttpProxySettings: React.FC<HttpSettingsBaseProps> = ({
label="Forward OAuth Identity"
tooltip="Forward the user's upstream OAuth identity to the data source (Their access token gets passed along)."
labelWidth={LABEL_WIDTH}
disabled={dataSourceConfig.readOnly}
>
<InlineSwitch
id="http-settings-forward-oauth"
packages/grafana-ui/src/components/FormField/FormField.tsx
+6 -1
View File
@@ -41,7 +41,12 @@ export const FormField: FunctionComponent<Props> = ({
{label}
</InlineFormLabel>
{inputEl || (
<input type="text" className={`gf-form-input ${inputWidth ? `width-${inputWidth}` : ''}`} {...inputProps} />
<input
type="text"
className={`gf-form-input ${inputWidth ? `width-${inputWidth}` : ''}`}
{...inputProps}
disabled={inputProps.disabled}
/>
)}
</div>
);
packages/grafana-ui/src/components/Switch/Switch.tsx
+9 -3
View File
@@ -14,7 +14,7 @@ export interface Props extends Omit<HTMLProps<HTMLInputElement>, 'value'> {
}
export const Switch = React.forwardRef<HTMLInputElement, Props>(
({ value, checked, disabled, onChange, id, label, ...inputProps }, ref) => {
({ value, checked, onChange, id, label, disabled, ...inputProps }, ref) => {
if (checked) {
deprecationWarning('Switch', 'checked prop', 'value');
}
@@ -30,7 +30,7 @@ export const Switch = React.forwardRef<HTMLInputElement, Props>(
disabled={disabled}
checked={value}
onChange={(event) => {
onChange?.(event);
!disabled && onChange?.(event);
}}
id={switchIdRef.current}
{...inputProps}
@@ -52,8 +52,9 @@ export const InlineSwitch = React.forwardRef<HTMLInputElement, InlineSwitchProps
({ transparent, className, showLabel, label, value, id, ...props }, ref) => {
const theme = useTheme2();
const styles = getSwitchStyles(theme, transparent);
return (
<div className={cx(styles.inlineContainer, className)}>
<div className={cx(styles.inlineContainer, className, props.disabled && styles.disabled)}>
{showLabel && (
<label
htmlFor={id}
@@ -158,6 +159,11 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme2, transparent?: boole
}
}
`,
disabled: css`
background-color: rgba(204, 204, 220, 0.04);
color: rgba(204, 204, 220, 0.6);
border: 1px solid rgba(204, 204, 220, 0.04);
`,
inlineLabel: css`
cursor: pointer;
padding-right: ${theme.spacing(1)};