diff --git a/packages/grafana-prometheus/src/configuration/PromSettings.tsx b/packages/grafana-prometheus/src/configuration/PromSettings.tsx index 3ec4fc8bf20..baa628cd24e 100644 --- a/packages/grafana-prometheus/src/configuration/PromSettings.tsx +++ b/packages/grafana-prometheus/src/configuration/PromSettings.tsx @@ -11,7 +11,7 @@ import { import { selectors } from '@grafana/e2e-selectors'; import { Trans, t } from '@grafana/i18n'; import { ConfigSubSection } from '@grafana/plugin-ui'; -import { InlineField, Input, Select, Switch, TextLink, useTheme2 } from '@grafana/ui'; +import { Box, InlineField, Input, Select, Stack, Switch, TextLink, useTheme2 } from '@grafana/ui'; import { DEFAULT_SERIES_LIMIT, @@ -107,157 +107,149 @@ export const PromSettings = (props: Props) => { title={t('grafana-prometheus.configuration.prom-settings.title-interval-behaviour', 'Interval behaviour')} className={styles.container} > -
- {/* Scrape interval */} -
-
- - - This interval is how frequently Prometheus scrapes targets. Set this to the typical scrape and - evaluation interval configured in your Prometheus config file. If you set this to a greater value - than your Prometheus config file interval, Grafana will evaluate the data according to this - interval and you will see less data points. Defaults to {'{{default}}'}. - {' '} - {docsTip()} - + + + {/* Scrape interval */} + + + This interval is how frequently Prometheus scrapes targets. Set this to the typical scrape and + evaluation interval configured in your Prometheus config file. If you set this to a greater value than + your Prometheus config file interval, Grafana will evaluate the data according to this interval and + you will see less data points. Defaults to {'{{default}}'}. + {' '} + {docsTip()} + + } + interactive={true} + disabled={optionsWithDefaults.readOnly} + > + <> + + updateValidDuration({ + ...validDuration, + timeInterval: e.currentTarget.value, + }) } - interactive={true} - disabled={optionsWithDefaults.readOnly} - > - <> - - updateValidDuration({ - ...validDuration, - timeInterval: e.currentTarget.value, - }) - } - data-testid={selectors.components.DataSource.Prometheus.configPage.scrapeInterval} - /> - {validateInput(validDuration.timeInterval, DURATION_REGEX, durationError)} - - -
-
+ data-testid={selectors.components.DataSource.Prometheus.configPage.scrapeInterval} + /> + {validateInput(validDuration.timeInterval, DURATION_REGEX, durationError)} + + {/* Query Timeout */} -
-
- - - Set the Prometheus query timeout. - {' '} - {docsTip()} - + + + Set the Prometheus query timeout. + {' '} + {docsTip()} + + } + interactive={true} + disabled={optionsWithDefaults.readOnly} + > + <> + + updateValidDuration({ + ...validDuration, + queryTimeout: e.currentTarget.value, + }) } - interactive={true} - disabled={optionsWithDefaults.readOnly} - > - <> - - updateValidDuration({ - ...validDuration, - queryTimeout: e.currentTarget.value, - }) - } - data-testid={selectors.components.DataSource.Prometheus.configPage.queryTimeout} - /> - {validateInput(validDuration.queryTimeout, DURATION_REGEX, durationError)} - - -
-
-
+ data-testid={selectors.components.DataSource.Prometheus.configPage.queryTimeout} + /> + {validateInput(validDuration.queryTimeout, DURATION_REGEX, durationError)} + + + + -
-
+ + - - Set default editor option for all users of this data source. - {' '} - {docsTip()} - - } - interactive={true} - disabled={optionsWithDefaults.readOnly} - > - - - 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.{' '} - - {docsTip()} - + options={editorOptions} + value={ + editorOptions.find((o) => o.value === optionsWithDefaults.jsonData.defaultEditor) ?? + editorOptions.find((o) => o.value === QueryEditorMode.Builder) } - interactive={true} - disabled={optionsWithDefaults.readOnly} - className={styles.switchField} - > - + onChange={onChangeHandler('defaultEditor', optionsWithDefaults, onOptionsChange)} + width={40} + data-testid={selectors.components.DataSource.Prometheus.configPage.defaultEditor} + /> + + + + 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.{' '} + + {docsTip()} + + } + interactive={true} + disabled={optionsWithDefaults.readOnly} + className={styles.switchField} + > + -
-
+ +
{ )} -
-
-
- - {/* , and attempt to detect the version */} - - Set this to the type of your prometheus database, e.g. Prometheus, Cortex, Mimir or Thanos. - Changing this field will save your current settings. Certain types of Prometheus supports or - does not support various APIs. For example, some types support regex matching for label - queries to improve performance. Some types have an API for metadata. If you set this - incorrectly you may experience odd behavior when querying metrics and labels. Please check - your Prometheus documentation to ensure you enter the correct type. - {' '} - {docsTip()} - - } - interactive={true} - disabled={optionsWithDefaults.readOnly} - > - o.value === optionsWithDefaults.jsonData.prometheusVersion - )} - onChange={onChangeHandler('prometheusVersion', optionsWithDefaults, onOptionsChange)} - width={40} - data-testid={selectors.components.DataSource.Prometheus.configPage.prometheusVersion} - /> - -
- )} -
-
- - )} -
-
-
- + + - - Sets the browser caching level for editor queries. Higher cache settings are recommended for high - cardinality data sources. - + {/* , and attempt to detect the version */} + + Set this to the type of your prometheus database, e.g. Prometheus, Cortex, Mimir or Thanos. + Changing this field will save your current settings. Certain types of Prometheus supports or does + not support various APIs. For example, some types support regex matching for label queries to + improve performance. Some types have an API for metadata. If you set this incorrectly you may + experience odd behavior when querying metrics and labels. Please check your Prometheus + documentation to ensure you enter the correct type. + {' '} + {docsTip()} } interactive={true} disabled={optionsWithDefaults.readOnly} > - updateValidDuration({ - ...validDuration, - incrementalQueryOverlapWindow: e.currentTarget.value, - }) - } - className="width-20" - value={ - optionsWithDefaults.jsonData.incrementalQueryOverlapWindow ?? defaultPrometheusQueryOverlapWindow - } - onChange={onChangeHandler('incrementalQueryOverlapWindow', optionsWithDefaults, onOptionsChange)} - spellCheck={false} - data-testid={selectors.components.DataSource.Prometheus.configPage.queryOverlapWindow} + interactive={true} + disabled={optionsWithDefaults.readOnly} + > + o.value === optionsWithDefaults.jsonData.cacheLevel) ?? + PrometheusCacheLevel.Low + } + data-testid={selectors.components.DataSource.Prometheus.configPage.cacheLevel} + /> + + + + + This feature will change the default behavior of relative queries to always request fresh data from + the prometheus instance, instead query results will be cached, and only new records are requested. + Turn this on to decrease database and network load. + + + } + interactive={true} + className={styles.switchField} + disabled={optionsWithDefaults.readOnly} + > + + + + {optionsWithDefaults.jsonData.incrementalQuerying && ( + + + Set a duration like {'{{example1}}'} or {'{{example2}}'} or {'{{example3}}'}. Default of{' '} + {'{{default}}'}. This duration will be added to the duration of each incremental request. + + + } + interactive={true} + disabled={optionsWithDefaults.readOnly} + > + <> + + updateValidDuration({ + ...validDuration, + incrementalQueryOverlapWindow: e.currentTarget.value, + }) + } + className="width-20" + value={ + optionsWithDefaults.jsonData.incrementalQueryOverlapWindow ?? defaultPrometheusQueryOverlapWindow + } + onChange={onChangeHandler('incrementalQueryOverlapWindow', optionsWithDefaults, onOptionsChange)} + spellCheck={false} + data-testid={selectors.components.DataSource.Prometheus.configPage.queryOverlapWindow} /> - -
-
-
+ {validateInput(validDuration.incrementalQueryOverlapWindow, MULTIPLE_DURATION_REGEX, durationError)} + + + )} + + + + This feature will disable recording rules. Turn this on to improve dashboard performance + + + } + interactive={true} + className={styles.switchField} + disabled={optionsWithDefaults.readOnly} + > + + + +
-
-
-
- - - Add custom parameters to the Prometheus query URL. For example {'{{example1}}'}, {'{{example2}}'},{' '} - {'{{example3}}'}, or - {'{{example4}}'}. Multiple parameters should be concatenated together with{' '} - {'{{concatenationChar}}'}. - {' '} - {docsTip()} - - } - interactive={true} - disabled={optionsWithDefaults.readOnly} - > - - -
-
-
- {/* HTTP Method */} -
- - - You can use either POST or GET HTTP method to query your Prometheus data source. POST is the - recommended method as it allows bigger queries. Change this to GET if you have a Prometheus - version older than 2.1 or if POST requests are restricted in your network. - {' '} - {docsTip()} - - } - interactive={true} - label={t('grafana-prometheus.configuration.prom-settings.label-http-method', 'HTTP method')} - disabled={optionsWithDefaults.readOnly} - > - + + {/* HTTP Method */} + + + You can use either POST or GET HTTP method to query your Prometheus data source. POST is the + recommended method as it allows bigger queries. Change this to GET if you have a Prometheus version + older than 2.1 or if POST requests are restricted in your network. + {' '} + {docsTip()} + + } + interactive={true} + label={t('grafana-prometheus.configuration.prom-settings.label-http-method', 'HTTP method')} + disabled={optionsWithDefaults.readOnly} + > +