diff --git a/packages/grafana-prometheus/src/configuration/PromSettings.tsx b/packages/grafana-prometheus/src/configuration/PromSettings.tsx index baa628cd24e..48d3c092eb6 100644 --- a/packages/grafana-prometheus/src/configuration/PromSettings.tsx +++ b/packages/grafana-prometheus/src/configuration/PromSettings.tsx @@ -111,77 +111,77 @@ export const PromSettings = (props: Props) => { {/* 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} + > <> - - 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()} + + updateValidDuration({ + ...validDuration, + timeInterval: e.currentTarget.value, + }) + } + data-testid={selectors.components.DataSource.Prometheus.configPage.scrapeInterval} + /> + {validateInput(validDuration.timeInterval, DURATION_REGEX, durationError)} - } - 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)} - - - {/* Query Timeout */} - + {/* Query Timeout */} + + + Set the Prometheus query timeout. + {' '} + {docsTip()} + + } + interactive={true} + disabled={optionsWithDefaults.readOnly} + > <> - - Set the Prometheus query timeout. - {' '} - {docsTip()} + + updateValidDuration({ + ...validDuration, + queryTimeout: e.currentTarget.value, + }) + } + data-testid={selectors.components.DataSource.Prometheus.configPage.queryTimeout} + /> + {validateInput(validDuration.queryTimeout, DURATION_REGEX, durationError)} - } - 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)} - @@ -195,58 +195,58 @@ export const PromSettings = (props: Props) => { - - Set default editor option for all users of this data source. - {' '} - {docsTip()} - - } - interactive={true} - disabled={optionsWithDefaults.readOnly} - > - o.value === optionsWithDefaults.jsonData.defaultEditor) ?? + editorOptions.find((o) => o.value === QueryEditorMode.Builder) + } + 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} + > + @@ -275,56 +275,17 @@ export const PromSettings = (props: Props) => { - {/* , 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.prometheusType + )} + onChange={onChangeHandler('prometheusType', optionsWithDefaults, onOptionsChange)} + width={40} + data-testid={selectors.components.DataSource.Prometheus.configPage.prometheusType} + /> + + {optionsWithDefaults.jsonData.prometheusType && ( + o.value === optionsWithDefaults.jsonData.prometheusVersion - )} - onChange={onChangeHandler('prometheusVersion', optionsWithDefaults, onOptionsChange)} - width={40} - data-testid={selectors.components.DataSource.Prometheus.configPage.prometheusVersion} - /> - + labelWidth={PROM_CONFIG_LABEL_WIDTH} + tooltip={ + <> + + Use this to set the version of your {'{{promType}}'} instance if it is not automatically + configured. + {' '} + {docsTip()} + + } + 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. + + Sets the browser caching level for editor queries. Higher cache settings are recommended for high + cardinality data sources. } 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)} - + + 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)} + + )} - labelWidth={PROM_CONFIG_LABEL_WIDTH} - tooltip={ - <> - - This feature will disable recording rules. Turn this on to improve dashboard performance - - - } - interactive={true} - className={styles.switchField} - disabled={optionsWithDefaults.readOnly} - > - + + + + This feature will disable recording rules. Turn this on to improve dashboard performance + + + } + interactive={true} + className={styles.switchField} + disabled={optionsWithDefaults.readOnly} + > + @@ -493,135 +493,139 @@ export const PromSettings = (props: Props) => { 'grafana-prometheus.configuration.prom-settings.label-custom-query-parameters', 'Custom query parameters' )} - labelWidth={PROM_CONFIG_LABEL_WIDTH} - tooltip={ - <> - - 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} - > - { - setSeriesLimit(event.currentTarget.value); - onOptionsChange({ - ...optionsWithDefaults, - jsonData: { - ...optionsWithDefaults.jsonData, - seriesLimit: parseInt(event.currentTarget.value, 10), - }, - }); - }} - onBlur={(e) => validateInput(e.currentTarget.value, NON_NEGATIVE_INTEGER_REGEX, seriesLimitError)} - data-testid={selectors.components.DataSource.Prometheus.configPage.seriesLimit} + placeholder={t( + 'grafana-prometheus.configuration.prom-settings.placeholder-example-maxsourceresolutionmtimeout', + 'Example: {{example}}', + { example: 'max_source_resolution=5m&timeout=10' } + )} + data-testid={selectors.components.DataSource.Prometheus.configPage.customQueryParameters} /> - {validateInput(seriesLimit, NON_NEGATIVE_INTEGER_REGEX, seriesLimitError)} - - - + {/* 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} + > + { + setSeriesLimit(event.currentTarget.value); + onOptionsChange({ + ...optionsWithDefaults, + jsonData: { + ...optionsWithDefaults.jsonData, + seriesLimit: parseInt(event.currentTarget.value, 10), + }, + }); + }} + onBlur={(e) => validateInput(e.currentTarget.value, NON_NEGATIVE_INTEGER_REGEX, seriesLimitError)} + data-testid={selectors.components.DataSource.Prometheus.configPage.seriesLimit} + /> + {validateInput(seriesLimit, NON_NEGATIVE_INTEGER_REGEX, seriesLimitError)} - } - interactive={true} - disabled={optionsWithDefaults.readOnly} - className={styles.switchField} - > - + + + + Checking this option will favor the series endpoint with {'{{exampleParameter}}'} parameter over the + label values endpoint with {'{{exampleParameter}}'} parameter. While the label values endpoint is + considered more performant, some users may prefer the series because it has a POST method while the + label values endpoint only has a GET method. + {' '} + {docsTip()} + + } + interactive={true} + disabled={optionsWithDefaults.readOnly} + className={styles.switchField} + > +