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

packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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)};

public/app/features/datasources/components/BasicSettings.tsx

@@ -11,12 +11,21 @@ export interface Props {
   onNameChange: (name: string) => void;
   onDefaultChange: (value: boolean) => void;
   alertingSupported: boolean;
+  disabled?: boolean;
 }
 
-export function BasicSettings({ dataSourceName, isDefault, onDefaultChange, onNameChange, alertingSupported }: Props) {
+export function BasicSettings({
+  dataSourceName,
+  isDefault,
+  onDefaultChange,
+  onNameChange,
+  alertingSupported,
+  disabled,
+}: Props) {
   return (
     <>
-      {<AlertingEnabled enabled={alertingSupported} />}
+      <AlertingEnabled enabled={alertingSupported} />
+
       <div className="gf-form-group" aria-label="Datasource settings page basic settings">
         <div className="gf-form-inline">
           {/* Name */}
@@ -26,6 +35,7 @@ export function BasicSettings({ dataSourceName, isDefault, onDefaultChange, onNa
               tooltip="The name is used when you select the data source in panels. The default data source is
               'preselected in new panels."
               grow
+              disabled={disabled}
             >
               <Input
                 id="basic-settings-name"
@@ -40,7 +50,7 @@ export function BasicSettings({ dataSourceName, isDefault, onDefaultChange, onNa
           </div>
 
           {/* Is Default */}
-          <InlineField label="Default" labelWidth={8}>
+          <InlineField label="Default" labelWidth={8} disabled={disabled}>
             <InlineSwitch
               id="basic-settings-default"
               value={isDefault}

public/app/features/datasources/components/EditDataSource.tsx

@@ -159,6 +159,7 @@ export function EditDataSourceView({
         onDefaultChange={onDefaultChange}
         onNameChange={onNameChange}
         alertingSupported={alertingSupported}
+        disabled={readOnly || !hasWriteRights}
       />
 
       {plugin && (

public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx

@@ -51,19 +51,20 @@ export const AzureAuthSettings: FunctionComponent<HttpSettingsBaseProps> = (prop
         credentials={credentials}
         azureCloudOptions={KnownAzureClouds}
         onCredentialsChange={onCredentialsChange}
+        disabled={dataSourceConfig.readOnly}
       />
       {overrideAudienceAllowed && (
         <>
           <h6>Azure Configuration</h6>
           <div className="gf-form-group">
             <InlineFieldRow>
-              <InlineField labelWidth={26} label="Override AAD audience">
+              <InlineField labelWidth={26} label="Override AAD audience" disabled={dataSourceConfig.readOnly}>
                 <InlineSwitch value={overrideAudienceChecked} onChange={onOverrideAudienceChange} />
               </InlineField>
             </InlineFieldRow>
             {overrideAudienceChecked && (
               <InlineFieldRow>
-                <InlineField labelWidth={26} label="Resource ID">
+                <InlineField labelWidth={26} label="Resource ID" disabled={dataSourceConfig.readOnly}>
                   <Input
                     className="width-30"
                     value={dataSourceConfig.jsonData.azureEndpointResourceId || ''}

public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx

@@ -13,6 +13,7 @@ export interface Props {
   azureCloudOptions?: SelectableValue[];
   onCredentialsChange: (updatedCredentials: AzureCredentials) => void;
   getSubscriptions?: () => Promise<SelectableValue[]>;
+  disabled?: boolean;
 }
 
 const authTypeOptions: Array<SelectableValue<AzureAuthType>> = [
@@ -27,7 +28,7 @@ const authTypeOptions: Array<SelectableValue<AzureAuthType>> = [
 ];
 
 export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) => {
-  const { credentials, azureCloudOptions, onCredentialsChange, getSubscriptions } = props;
+  const { credentials, azureCloudOptions, onCredentialsChange, getSubscriptions, disabled } = props;
   const hasRequiredFields = isCredentialsComplete(credentials);
 
   const [subscriptions, setSubscriptions] = useState<Array<SelectableValue<string>>>([]);
@@ -161,6 +162,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
               value={authTypeOptions.find((opt) => opt.value === credentials.authType)}
               options={authTypeOptions}
               onChange={onAuthTypeChange}
+              isDisabled={disabled}
             />
           </div>
         </div>
@@ -178,6 +180,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                   value={azureCloudOptions.find((opt) => opt.value === credentials.azureCloud)}
                   options={azureCloudOptions}
                   onChange={onAzureCloudChange}
+                  isDisabled={disabled}
                 />
               </div>
             </div>
@@ -191,6 +194,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                   placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                   value={credentials.tenantId || ''}
                   onChange={onTenantIdChange}
+                  disabled={disabled}
                 />
               </div>
             </div>
@@ -204,6 +208,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                   placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                   value={credentials.clientId || ''}
                   onChange={onClientIdChange}
+                  disabled={disabled}
                 />
               </div>
             </div>
@@ -214,15 +219,17 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                 <InlineFormLabel htmlFor="azure-client-secret" className="width-12">
                   Client Secret
                 </InlineFormLabel>
-                <Input id="azure-client-secret" className="width-25" placeholder="configured" disabled={true} />
+                <Input id="azure-client-secret" className="width-25" placeholder="configured" disabled />
               </div>
-              <div className="gf-form">
-                <div className="max-width-30 gf-form-inline">
-                  <Button variant="secondary" type="button" onClick={onClientSecretReset}>
-                    reset
-                  </Button>
+              {!disabled && (
+                <div className="gf-form">
+                  <div className="max-width-30 gf-form-inline">
+                    <Button variant="secondary" type="button" onClick={onClientSecretReset}>
+                      reset
+                    </Button>
+                  </div>
                 </div>
-              </div>
+              )}
             </div>
           ) : (
             <div className="gf-form-inline">
@@ -234,6 +241,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                     placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                     value={credentials.clientSecret || ''}
                     onChange={onClientSecretChange}
+                    disabled={disabled}
                   />
                 </div>
               </div>
@@ -255,6 +263,7 @@ export const AzureCredentialsForm: FunctionComponent<Props> = (props: Props) =>
                   }
                   options={subscriptions}
                   onChange={onSubscriptionChange}
+                  isDisabled={disabled}
                 />
               </div>
             </div>

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 (
     <div className="gf-form-group">
-      <InlineField label="Internal link" labelWidth={24}>
+      <InlineField label="Internal link" labelWidth={24} disabled={disabled}>
         <>
           <InlineSwitch
             value={isInternalLink}
             aria-label={selectors.components.DataSource.Prometheus.configPage.internalLinkSwitch}
             onChange={(ev) => setIsInternalLink(ev.currentTarget.checked)}
           />
-          <Button
-            variant="destructive"
-            title="Remove link"
-            icon="times"
-            onClick={(event) => {
-              event.preventDefault();
-              onDelete();
-            }}
-            className={css`
-              margin-left: 8px;
-            `}
-          />
+          {!disabled && (
+            <Button
+              variant="destructive"
+              title="Remove link"
+              icon="times"
+              onClick={(event) => {
+                event.preventDefault();
+                onDelete();
+              }}
+              className={css`
+                margin-left: 8px;
+              `}
+            />
+          )}
         </>
       </InlineField>
 
@@ -45,6 +48,7 @@ export default function ExemplarSetting({ value, onChange, onDelete }: Props) {
           label="Data source"
           labelWidth={24}
           tooltip="The data source the exemplar is going to navigate to."
+          disabled={disabled}
         >
           <DataSourcePicker
             tracing={true}
@@ -65,6 +69,7 @@ export default function ExemplarSetting({ value, onChange, onDelete }: Props) {
           label="URL"
           labelWidth={24}
           tooltip="The URL of the trace backend the user would go to see its trace."
+          disabled={disabled}
         >
           <Input
             placeholder="https://example.com/${__value.raw}"
@@ -86,6 +91,7 @@ export default function ExemplarSetting({ value, onChange, onDelete }: Props) {
         label="URL Label"
         labelWidth={24}
         tooltip="Use to override the button label on the exemplar traceID field."
+        disabled={disabled}
       >
         <Input
           placeholder="Go to example.com"
@@ -104,6 +110,7 @@ export default function ExemplarSetting({ value, onChange, onDelete }: Props) {
         label="Label name"
         labelWidth={24}
         tooltip="The name of the field in the labels object that should be used to get the traceID."
+        disabled={disabled}
       >
         <Input
           placeholder="traceID"

public/app/plugins/datasource/prometheus/configuration/ExemplarsSettings.tsx

@@ -11,9 +11,10 @@ import ExemplarSetting from './ExemplarSetting';
 type Props = {
   options?: ExemplarTraceIdDestination[];
   onChange: (value: ExemplarTraceIdDestination[]) => void;
+  disabled?: boolean;
 };
 
-export function ExemplarsSettings({ options, onChange }: Props) {
+export function ExemplarsSettings({ options, onChange, disabled }: Props) {
   return (
     <>
       <h3 className="page-heading">Exemplars</h3>
@@ -34,25 +35,28 @@ export function ExemplarsSettings({ options, onChange }: Props) {
                 newOptions.splice(index, 1);
                 onChange(newOptions);
               }}
+              disabled={disabled}
             />
           );
         })}
 
-      <Button
-        variant="secondary"
-        aria-label={selectors.components.DataSource.Prometheus.configPage.exemplarsAddButton}
-        className={css`
-          margin-bottom: 10px;
-        `}
-        icon="plus"
-        onClick={(event) => {
-          event.preventDefault();
-          const newOptions = [...(options || []), { name: 'traceID' }];
-          onChange(newOptions);
-        }}
-      >
-        Add
-      </Button>
+      {!disabled && (
+        <Button
+          variant="secondary"
+          aria-label={selectors.components.DataSource.Prometheus.configPage.exemplarsAddButton}
+          className={css`
+            margin-bottom: 10px;
+          `}
+          icon="plus"
+          onClick={(event) => {
+            event.preventDefault();
+            const newOptions = [...(options || []), { name: 'traceID' }];
+            onChange(newOptions);
+          }}
+        >
+          Add
+        </Button>
+      )}
     </>
   );
 }

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}
           />
         </div>
       </div>
@@ -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}
           >
             <InlineSwitch
               value={options.jsonData.disableMetricsLookup ?? false}
@@ -299,6 +305,7 @@ export const PromSettings = (props: Props) => {
                   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}
       />
     </>
   );