From 220ee3d1d4fa37e89c259b8fd48689f2ff00e0a8 Mon Sep 17 00:00:00 2001 From: Ludovic Viaud Date: Tue, 10 Jan 2023 16:13:42 +0100 Subject: [PATCH] Prometheus: Disabled inputs when settings are read-only (#60354) --- .../DataSourceSettings/AlertingSettings.tsx | 2 +- .../DataSourceSettings/BasicAuthSettings.tsx | 4 +-- .../CustomHeadersSettings.test.tsx | 2 +- .../CustomHeadersSettings.tsx | 28 ++++++++------- .../DataSourceHttpSettings.tsx | 10 ++++-- .../DataSourceSettings/HttpProxySettings.tsx | 12 +++++-- .../src/components/FormField/FormField.tsx | 7 +++- .../src/components/Switch/Switch.tsx | 12 +++++-- .../datasources/components/BasicSettings.tsx | 16 +++++++-- .../datasources/components/EditDataSource.tsx | 1 + .../configuration/AzureAuthSettings.tsx | 5 +-- .../configuration/AzureCredentialsForm.tsx | 25 ++++++++----- .../configuration/ExemplarSetting.tsx | 35 ++++++++++-------- .../configuration/ExemplarsSettings.tsx | 36 ++++++++++--------- .../prometheus/configuration/PromSettings.tsx | 8 +++++ 15 files changed, 135 insertions(+), 68 deletions(-) diff --git a/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx index 51e1ce51fff..171858ae17d 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx @@ -19,7 +19,7 @@ export function AlertingSettings({ options, onOptionsC
- + diff --git a/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx index d74a3c38f6e..434f5fec3b1 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx @@ -35,7 +35,7 @@ export const BasicAuthSettings: React.FC = ({ dataSourceConfi return ( <> - + = ({ dataSourceConfi onChange={(event) => onChange({ ...dataSourceConfig, basicAuthUser: event.currentTarget.value })} /> - + { password: true, }, secureJsonFields: {}, - readOnly: true, + readOnly: false, }, onChange, ...propOverrides, diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx index ade08af90b7..3716d3f1db5 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx @@ -196,6 +196,8 @@ export class CustomHeadersSettings extends PureComponent { render() { const { headers } = this.state; + const { dataSourceConfig } = this.props; + return (
@@ -215,18 +217,20 @@ export class CustomHeadersSettings extends PureComponent { /> ))}
-
- -
+ {!dataSourceConfig.readOnly && ( +
+ +
+ )}
); } diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx index 77609e1966a..79819918e20 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx @@ -113,6 +113,7 @@ export const DataSourceHttpSettings: React.FC = (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 = (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 = (props) => { onChange={(cookies) => onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } }) } + disabled={dataSourceConfig.readOnly} />
@@ -200,6 +203,7 @@ export const DataSourceHttpSettings: React.FC = (props) => { jsonData: { ...dataSourceConfig.jsonData, timeout: parseInt(event.currentTarget.value, 10) }, }); }} + disabled={dataSourceConfig.readOnly} />
@@ -211,7 +215,7 @@ export const DataSourceHttpSettings: React.FC = (props) => {

Auth

- + = (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} > = (props) => { label="Azure Authentication" tooltip="Use Azure authentication for Azure endpoint." labelWidth={LABEL_WIDTH} + disabled={dataSourceConfig.readOnly} > = (props) => { {sigV4AuthToggleEnabled && (
- + = ({ return ( <>
- + onChange({ ...dataSourceConfig.jsonData, tlsAuth: event!.currentTarget.checked })} /> - + = ({
- + = ({ 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} > = ({ {label} {inputEl || ( - + )}
); diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx index e6ab6df43cb..c91dc1a1cc4 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.tsx @@ -14,7 +14,7 @@ export interface Props extends Omit, 'value'> { } export const Switch = React.forwardRef( - ({ 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( disabled={disabled} checked={value} onChange={(event) => { - onChange?.(event); + !disabled && onChange?.(event); }} id={switchIdRef.current} {...inputProps} @@ -52,8 +52,9 @@ export const InlineSwitch = React.forwardRef { const theme = useTheme2(); const styles = getSwitchStyles(theme, transparent); + return ( -
+
{showLabel && (
@@ -191,6 +194,7 @@ export const AzureCredentialsForm: FunctionComponent = (props: Props) => placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" value={credentials.tenantId || ''} onChange={onTenantIdChange} + disabled={disabled} />
@@ -204,6 +208,7 @@ export const AzureCredentialsForm: FunctionComponent = (props: Props) => placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" value={credentials.clientId || ''} onChange={onClientIdChange} + disabled={disabled} />
@@ -214,15 +219,17 @@ export const AzureCredentialsForm: FunctionComponent = (props: Props) => Client Secret - +
-
-
- + {!disabled && ( +
+
+ +
-
+ )}
) : (
@@ -234,6 +241,7 @@ export const AzureCredentialsForm: FunctionComponent = (props: Props) => placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" value={credentials.clientSecret || ''} onChange={onClientSecretChange} + disabled={disabled} />
@@ -255,6 +263,7 @@ export const AzureCredentialsForm: FunctionComponent = (props: Props) => } options={subscriptions} onChange={onSubscriptionChange} + isDisabled={disabled} /> diff --git a/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx b/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx index 25836d31c41..acc75e8e29b 100644 --- a/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx +++ b/public/app/plugins/datasource/prometheus/configuration/ExemplarSetting.tsx @@ -11,32 +11,35 @@ type Props = { value: ExemplarTraceIdDestination; onChange: (value: ExemplarTraceIdDestination) => void; onDelete: () => void; + disabled?: boolean; }; -export default function ExemplarSetting({ value, onChange, onDelete }: Props) { +export default function ExemplarSetting({ value, onChange, onDelete, disabled }: Props) { const [isInternalLink, setIsInternalLink] = useState(Boolean(value.datasourceUid)); return (
- + <> setIsInternalLink(ev.currentTarget.checked)} /> - + {!disabled && ( + + )} ); } diff --git a/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx b/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx index de50b5ca5ba..386639bab09 100644 --- a/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx +++ b/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx @@ -158,6 +158,7 @@ export const PromSettings = (props: Props) => { placeholder="15s" onChange={onChangeHandler('timeInterval', options, onOptionsChange)} validationEvents={promSettingsValidationEvents} + disabled={options.readOnly} /> } tooltip="Set this to the typical scrape and evaluation interval configured in Prometheus. Defaults to 15s." @@ -178,6 +179,7 @@ export const PromSettings = (props: Props) => { spellCheck={false} placeholder="60s" validationEvents={promSettingsValidationEvents} + disabled={options.readOnly} /> } tooltip="Set the Prometheus query timeout." @@ -198,6 +200,7 @@ export const PromSettings = (props: Props) => { value={httpOptions.find((o) => o.value === options.jsonData.httpMethod)} onChange={onChangeHandler('httpMethod', options, onOptionsChange)} className="width-6" + disabled={options.readOnly} />
@@ -242,6 +245,7 @@ export const PromSettings = (props: Props) => { } )} width={20} + disabled={options.readOnly} /> } tooltip="Set this to the type of your prometheus database, e.g. Prometheus, Cortex, Mimir or Thanos. Changing this field will save your current settings, and attempt to detect the version." @@ -263,6 +267,7 @@ export const PromSettings = (props: Props) => { )} onChange={onChangeHandler('prometheusVersion', options, onOptionsChange)} width={20} + disabled={options.readOnly} /> } tooltip={`Use this to set the version of your ${options.jsonData.prometheusType} instance if it is not automatically configured.`} @@ -279,6 +284,7 @@ export const PromSettings = (props: Props) => { labelWidth={28} label="Disable metrics lookup" tooltip="Checking this option will disable the metrics chooser and metric/label support in the query field's autocomplete. This helps if you have performance issues with bigger Prometheus instances." + disabled={options.readOnly} > { onChange={onChangeHandler('customQueryParameters', options, onOptionsChange)} spellCheck={false} placeholder="Example: max_source_resolution=5m&timeout=10" + disabled={options.readOnly} /> } /> @@ -314,6 +321,7 @@ export const PromSettings = (props: Props) => { exemplarOptions ) } + disabled={options.readOnly} /> );