remove deprecated css classes
This commit is contained in:
Kevin Yu
@@ -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}
|
||||
>
|
||||
<div className="gf-form-group">
|
||||
{/* Scrape interval */}
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form">
|
||||
<InlineField
|
||||
label={t('grafana-prometheus.configuration.prom-settings.label-scrape-interval', 'Scrape interval')}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans
|
||||
i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-scrape-interval"
|
||||
values={{ default: '15s' }}
|
||||
>
|
||||
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}}'}.
|
||||
</Trans>{' '}
|
||||
{docsTip()}
|
||||
</>
|
||||
<Box marginBottom={5}>
|
||||
<Stack direction="column" gap={0.5}>
|
||||
{/* Scrape interval */}
|
||||
<InlineField
|
||||
label={t('grafana-prometheus.configuration.prom-settings.label-scrape-interval', 'Scrape interval')}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans
|
||||
i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-scrape-interval"
|
||||
values={{ default: '15s' }}
|
||||
>
|
||||
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}}'}.
|
||||
</Trans>{' '}
|
||||
{docsTip()}
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<>
|
||||
<Input
|
||||
className="width-20"
|
||||
value={optionsWithDefaults.jsonData.timeInterval}
|
||||
spellCheck={false}
|
||||
// eslint-disable-next-line @grafana/i18n/no-untranslated-strings
|
||||
placeholder="15s"
|
||||
onChange={onChangeHandler('timeInterval', optionsWithDefaults, onOptionsChange)}
|
||||
onBlur={(e) =>
|
||||
updateValidDuration({
|
||||
...validDuration,
|
||||
timeInterval: e.currentTarget.value,
|
||||
})
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<>
|
||||
<Input
|
||||
className="width-20"
|
||||
value={optionsWithDefaults.jsonData.timeInterval}
|
||||
spellCheck={false}
|
||||
// eslint-disable-next-line @grafana/i18n/no-untranslated-strings
|
||||
placeholder="15s"
|
||||
onChange={onChangeHandler('timeInterval', optionsWithDefaults, onOptionsChange)}
|
||||
onBlur={(e) =>
|
||||
updateValidDuration({
|
||||
...validDuration,
|
||||
timeInterval: e.currentTarget.value,
|
||||
})
|
||||
}
|
||||
data-testid={selectors.components.DataSource.Prometheus.configPage.scrapeInterval}
|
||||
/>
|
||||
{validateInput(validDuration.timeInterval, DURATION_REGEX, durationError)}
|
||||
</>
|
||||
</InlineField>
|
||||
</div>
|
||||
</div>
|
||||
data-testid={selectors.components.DataSource.Prometheus.configPage.scrapeInterval}
|
||||
/>
|
||||
{validateInput(validDuration.timeInterval, DURATION_REGEX, durationError)}
|
||||
</>
|
||||
</InlineField>
|
||||
{/* Query Timeout */}
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form">
|
||||
<InlineField
|
||||
label={t('grafana-prometheus.configuration.prom-settings.label-query-timeout', 'Query timeout')}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-query-timeout">
|
||||
Set the Prometheus query timeout.
|
||||
</Trans>{' '}
|
||||
{docsTip()}
|
||||
</>
|
||||
<InlineField
|
||||
label={t('grafana-prometheus.configuration.prom-settings.label-query-timeout', 'Query timeout')}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-query-timeout">
|
||||
Set the Prometheus query timeout.
|
||||
</Trans>{' '}
|
||||
{docsTip()}
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<>
|
||||
<Input
|
||||
className="width-20"
|
||||
value={optionsWithDefaults.jsonData.queryTimeout}
|
||||
onChange={onChangeHandler('queryTimeout', optionsWithDefaults, onOptionsChange)}
|
||||
spellCheck={false}
|
||||
// eslint-disable-next-line @grafana/i18n/no-untranslated-strings
|
||||
placeholder="60s"
|
||||
onBlur={(e) =>
|
||||
updateValidDuration({
|
||||
...validDuration,
|
||||
queryTimeout: e.currentTarget.value,
|
||||
})
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<>
|
||||
<Input
|
||||
className="width-20"
|
||||
value={optionsWithDefaults.jsonData.queryTimeout}
|
||||
onChange={onChangeHandler('queryTimeout', optionsWithDefaults, onOptionsChange)}
|
||||
spellCheck={false}
|
||||
// eslint-disable-next-line @grafana/i18n/no-untranslated-strings
|
||||
placeholder="60s"
|
||||
onBlur={(e) =>
|
||||
updateValidDuration({
|
||||
...validDuration,
|
||||
queryTimeout: e.currentTarget.value,
|
||||
})
|
||||
}
|
||||
data-testid={selectors.components.DataSource.Prometheus.configPage.queryTimeout}
|
||||
/>
|
||||
{validateInput(validDuration.queryTimeout, DURATION_REGEX, durationError)}
|
||||
</>
|
||||
</InlineField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
data-testid={selectors.components.DataSource.Prometheus.configPage.queryTimeout}
|
||||
/>
|
||||
{validateInput(validDuration.queryTimeout, DURATION_REGEX, durationError)}
|
||||
</>
|
||||
</InlineField>
|
||||
</Stack>
|
||||
</Box>
|
||||
</ConfigSubSection>
|
||||
|
||||
<ConfigSubSection
|
||||
title={t('grafana-prometheus.configuration.prom-settings.title-query-editor', 'Query editor')}
|
||||
className={styles.container}
|
||||
>
|
||||
<div className="gf-form-group">
|
||||
<div className="gf-form">
|
||||
<Box marginBottom={5}>
|
||||
<Stack direction="column" gap={0.5}>
|
||||
<InlineField
|
||||
label={t('grafana-prometheus.configuration.prom-settings.label-default-editor', 'Default editor')}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-default-editor">
|
||||
Set default editor option for all users of this data source.
|
||||
</Trans>{' '}
|
||||
{docsTip()}
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<Select
|
||||
aria-label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.aria-label-default-editor',
|
||||
'Default Editor (Code or Builder)'
|
||||
)}
|
||||
options={editorOptions}
|
||||
value={
|
||||
editorOptions.find((o) => 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}
|
||||
/>
|
||||
</InlineField>
|
||||
</div>
|
||||
<div className="gf-form">
|
||||
<InlineField
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.label-disable-metrics-lookup',
|
||||
'Disable metrics lookup'
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-default-editor">
|
||||
Set default editor option for all users of this data source.
|
||||
</Trans>{' '}
|
||||
{docsTip()}
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<Select
|
||||
aria-label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.aria-label-default-editor',
|
||||
'Default Editor (Code or Builder)'
|
||||
)}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-disable-metrics-lookup">
|
||||
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.{' '}
|
||||
</Trans>
|
||||
{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}
|
||||
>
|
||||
<Switch
|
||||
value={optionsWithDefaults.jsonData.disableMetricsLookup ?? false}
|
||||
onChange={onUpdateDatasourceJsonDataOptionChecked(props, 'disableMetricsLookup')}
|
||||
id={selectors.components.DataSource.Prometheus.configPage.disableMetricLookup}
|
||||
/>
|
||||
onChange={onChangeHandler('defaultEditor', optionsWithDefaults, onOptionsChange)}
|
||||
width={40}
|
||||
data-testid={selectors.components.DataSource.Prometheus.configPage.defaultEditor}
|
||||
/>
|
||||
</InlineField>
|
||||
<InlineField
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.label-disable-metrics-lookup',
|
||||
'Disable metrics lookup'
|
||||
)}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-disable-metrics-lookup">
|
||||
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.{' '}
|
||||
</Trans>
|
||||
{docsTip()}
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
className={styles.switchField}
|
||||
>
|
||||
<Switch
|
||||
value={optionsWithDefaults.jsonData.disableMetricsLookup ?? false}
|
||||
onChange={onUpdateDatasourceJsonDataOptionChecked(props, 'disableMetricsLookup')}
|
||||
id={selectors.components.DataSource.Prometheus.configPage.disableMetricLookup}
|
||||
/>
|
||||
</InlineField>
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
</Box>
|
||||
</ConfigSubSection>
|
||||
|
||||
<ConfigSubSection
|
||||
@@ -279,319 +271,293 @@ export const PromSettings = (props: Props) => {
|
||||
</Trans>
|
||||
</div>
|
||||
)}
|
||||
<div className="gf-form-group">
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form">
|
||||
<InlineField
|
||||
label={t('grafana-prometheus.configuration.prom-settings.label-prometheus-type', 'Prometheus type')}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
{/* , and attempt to detect the version */}
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-prometheus-type">
|
||||
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.
|
||||
</Trans>{' '}
|
||||
{docsTip()}
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<Select
|
||||
aria-label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.aria-label-prometheus-type',
|
||||
'Prometheus type'
|
||||
)}
|
||||
options={prometheusFlavorSelectItems}
|
||||
value={prometheusFlavorSelectItems.find(
|
||||
(o) => o.value === optionsWithDefaults.jsonData.prometheusType
|
||||
)}
|
||||
onChange={onChangeHandler('prometheusType', optionsWithDefaults, onOptionsChange)}
|
||||
width={40}
|
||||
data-testid={selectors.components.DataSource.Prometheus.configPage.prometheusType}
|
||||
/>
|
||||
</InlineField>
|
||||
</div>
|
||||
</div>
|
||||
<div className="gf-form-inline">
|
||||
{optionsWithDefaults.jsonData.prometheusType && (
|
||||
<div className="gf-form">
|
||||
<InlineField
|
||||
label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.label-prom-type-version',
|
||||
'{{promType}} version',
|
||||
{
|
||||
promType: optionsWithDefaults.jsonData.prometheusType,
|
||||
}
|
||||
)}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans
|
||||
i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-prom-type-version"
|
||||
values={{ promType: optionsWithDefaults.jsonData.prometheusType }}
|
||||
>
|
||||
Use this to set the version of your {'{{promType}}'} instance if it is not automatically
|
||||
configured.
|
||||
</Trans>{' '}
|
||||
{docsTip()}
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<Select
|
||||
aria-label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.aria-label-prom-type-type',
|
||||
'{{promType}} type',
|
||||
{
|
||||
promType: optionsWithDefaults.jsonData.prometheusType,
|
||||
}
|
||||
)}
|
||||
options={PromFlavorVersions[optionsWithDefaults.jsonData.prometheusType]}
|
||||
value={PromFlavorVersions[optionsWithDefaults.jsonData.prometheusType]?.find(
|
||||
(o) => o.value === optionsWithDefaults.jsonData.prometheusVersion
|
||||
)}
|
||||
onChange={onChangeHandler('prometheusVersion', optionsWithDefaults, onOptionsChange)}
|
||||
width={40}
|
||||
data-testid={selectors.components.DataSource.Prometheus.configPage.prometheusVersion}
|
||||
/>
|
||||
</InlineField>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="gf-form-group">
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form max-width-30">
|
||||
<InlineField
|
||||
label={t('grafana-prometheus.configuration.prom-settings.label-cache-level', 'Cache level')}
|
||||
<Box marginBottom={5}>
|
||||
<Stack direction="column" gap={0.5}>
|
||||
<InlineField
|
||||
label={t('grafana-prometheus.configuration.prom-settings.label-prometheus-type', 'Prometheus type')}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-cache-level">
|
||||
Sets the browser caching level for editor queries. Higher cache settings are recommended for high
|
||||
cardinality data sources.
|
||||
</Trans>
|
||||
{/* , and attempt to detect the version */}
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-prometheus-type">
|
||||
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.
|
||||
</Trans>{' '}
|
||||
{docsTip()}
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<Select
|
||||
aria-label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.aria-label-prometheus-type',
|
||||
'Prometheus type'
|
||||
)}
|
||||
options={prometheusFlavorSelectItems}
|
||||
value={prometheusFlavorSelectItems.find(
|
||||
(o) => o.value === optionsWithDefaults.jsonData.prometheusType
|
||||
)}
|
||||
onChange={onChangeHandler('prometheusType', optionsWithDefaults, onOptionsChange)}
|
||||
width={40}
|
||||
onChange={onChangeHandler('cacheLevel', optionsWithDefaults, onOptionsChange)}
|
||||
options={cacheValueOptions}
|
||||
value={
|
||||
cacheValueOptions.find((o) => o.value === optionsWithDefaults.jsonData.cacheLevel) ??
|
||||
PrometheusCacheLevel.Low
|
||||
data-testid={selectors.components.DataSource.Prometheus.configPage.prometheusType}
|
||||
/>
|
||||
</InlineField>
|
||||
{optionsWithDefaults.jsonData.prometheusType && (
|
||||
<InlineField
|
||||
label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.label-prom-type-version',
|
||||
'{{promType}} version',
|
||||
{
|
||||
promType: optionsWithDefaults.jsonData.prometheusType,
|
||||
}
|
||||
)}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans
|
||||
i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-prom-type-version"
|
||||
values={{ promType: optionsWithDefaults.jsonData.prometheusType }}
|
||||
>
|
||||
Use this to set the version of your {'{{promType}}'} instance if it is not automatically
|
||||
configured.
|
||||
</Trans>{' '}
|
||||
{docsTip()}
|
||||
</>
|
||||
}
|
||||
data-testid={selectors.components.DataSource.Prometheus.configPage.cacheLevel}
|
||||
/>
|
||||
</InlineField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form max-width-30">
|
||||
<InlineField
|
||||
label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.label-incremental-querying-beta',
|
||||
'Incremental querying (beta)'
|
||||
)}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-incremental-querying-beta">
|
||||
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.
|
||||
</Trans>
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
className={styles.switchField}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<Switch
|
||||
value={optionsWithDefaults.jsonData.incrementalQuerying ?? false}
|
||||
onChange={onUpdateDatasourceJsonDataOptionChecked(props, 'incrementalQuerying')}
|
||||
id={selectors.components.DataSource.Prometheus.configPage.incrementalQuerying}
|
||||
/>
|
||||
</InlineField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="gf-form-inline">
|
||||
{optionsWithDefaults.jsonData.incrementalQuerying && (
|
||||
<InlineField
|
||||
label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.label-query-overlap-window',
|
||||
'Query overlap window'
|
||||
)}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans
|
||||
i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-query-overlap-window"
|
||||
values={{
|
||||
example1: '10m',
|
||||
example2: '120s',
|
||||
example3: '0s',
|
||||
default: '10m',
|
||||
}}
|
||||
>
|
||||
Set a duration like {'{{example1}}'} or {'{{example2}}'} or {'{{example3}}'}. Default of{' '}
|
||||
{'{{default}}'}. This duration will be added to the duration of each incremental request.
|
||||
</Trans>
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<>
|
||||
<Input
|
||||
onBlur={(e) =>
|
||||
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}
|
||||
>
|
||||
<Select
|
||||
aria-label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.aria-label-prom-type-type',
|
||||
'{{promType}} type',
|
||||
{
|
||||
promType: optionsWithDefaults.jsonData.prometheusType,
|
||||
}
|
||||
)}
|
||||
options={PromFlavorVersions[optionsWithDefaults.jsonData.prometheusType]}
|
||||
value={PromFlavorVersions[optionsWithDefaults.jsonData.prometheusType]?.find(
|
||||
(o) => o.value === optionsWithDefaults.jsonData.prometheusVersion
|
||||
)}
|
||||
onChange={onChangeHandler('prometheusVersion', optionsWithDefaults, onOptionsChange)}
|
||||
width={40}
|
||||
data-testid={selectors.components.DataSource.Prometheus.configPage.prometheusVersion}
|
||||
/>
|
||||
{validateInput(validDuration.incrementalQueryOverlapWindow, MULTIPLE_DURATION_REGEX, durationError)}
|
||||
</>
|
||||
</InlineField>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form max-width-30">
|
||||
<InlineField
|
||||
label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.label-disable-recording-rules-beta',
|
||||
'Disable recording rules (beta)'
|
||||
</InlineField>
|
||||
)}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-disable-recording-rules-beta">
|
||||
This feature will disable recording rules. Turn this on to improve dashboard performance
|
||||
</Trans>
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
className={styles.switchField}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<Switch
|
||||
value={optionsWithDefaults.jsonData.disableRecordingRules ?? false}
|
||||
onChange={onUpdateDatasourceJsonDataOptionChecked(props, 'disableRecordingRules')}
|
||||
id={selectors.components.DataSource.Prometheus.configPage.disableRecordingRules}
|
||||
</Stack>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
<Box marginBottom={5}>
|
||||
<Stack direction="column" gap={0.5}>
|
||||
<InlineField
|
||||
label={t('grafana-prometheus.configuration.prom-settings.label-cache-level', 'Cache level')}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-cache-level">
|
||||
Sets the browser caching level for editor queries. Higher cache settings are recommended for high
|
||||
cardinality data sources.
|
||||
</Trans>
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<Select
|
||||
width={40}
|
||||
onChange={onChangeHandler('cacheLevel', optionsWithDefaults, onOptionsChange)}
|
||||
options={cacheValueOptions}
|
||||
value={
|
||||
cacheValueOptions.find((o) => o.value === optionsWithDefaults.jsonData.cacheLevel) ??
|
||||
PrometheusCacheLevel.Low
|
||||
}
|
||||
data-testid={selectors.components.DataSource.Prometheus.configPage.cacheLevel}
|
||||
/>
|
||||
</InlineField>
|
||||
|
||||
<InlineField
|
||||
label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.label-incremental-querying-beta',
|
||||
'Incremental querying (beta)'
|
||||
)}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-incremental-querying-beta">
|
||||
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.
|
||||
</Trans>
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
className={styles.switchField}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<Switch
|
||||
value={optionsWithDefaults.jsonData.incrementalQuerying ?? false}
|
||||
onChange={onUpdateDatasourceJsonDataOptionChecked(props, 'incrementalQuerying')}
|
||||
id={selectors.components.DataSource.Prometheus.configPage.incrementalQuerying}
|
||||
/>
|
||||
</InlineField>
|
||||
|
||||
{optionsWithDefaults.jsonData.incrementalQuerying && (
|
||||
<InlineField
|
||||
label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.label-query-overlap-window',
|
||||
'Query overlap window'
|
||||
)}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans
|
||||
i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-query-overlap-window"
|
||||
values={{
|
||||
example1: '10m',
|
||||
example2: '120s',
|
||||
example3: '0s',
|
||||
default: '10m',
|
||||
}}
|
||||
>
|
||||
Set a duration like {'{{example1}}'} or {'{{example2}}'} or {'{{example3}}'}. Default of{' '}
|
||||
{'{{default}}'}. This duration will be added to the duration of each incremental request.
|
||||
</Trans>
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<>
|
||||
<Input
|
||||
onBlur={(e) =>
|
||||
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}
|
||||
/>
|
||||
</InlineField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{validateInput(validDuration.incrementalQueryOverlapWindow, MULTIPLE_DURATION_REGEX, durationError)}
|
||||
</>
|
||||
</InlineField>
|
||||
)}
|
||||
|
||||
<InlineField
|
||||
label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.label-disable-recording-rules-beta',
|
||||
'Disable recording rules (beta)'
|
||||
)}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-disable-recording-rules-beta">
|
||||
This feature will disable recording rules. Turn this on to improve dashboard performance
|
||||
</Trans>
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
className={styles.switchField}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<Switch
|
||||
value={optionsWithDefaults.jsonData.disableRecordingRules ?? false}
|
||||
onChange={onUpdateDatasourceJsonDataOptionChecked(props, 'disableRecordingRules')}
|
||||
id={selectors.components.DataSource.Prometheus.configPage.disableRecordingRules}
|
||||
/>
|
||||
</InlineField>
|
||||
</Stack>
|
||||
</Box>
|
||||
</ConfigSubSection>
|
||||
|
||||
<ConfigSubSection
|
||||
title={t('grafana-prometheus.configuration.prom-settings.title-other', 'Other')}
|
||||
className={styles.container}
|
||||
>
|
||||
<div className="gf-form-group">
|
||||
<div className="gf-form-inline">
|
||||
<div className="gf-form max-width-30">
|
||||
<InlineField
|
||||
label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.label-custom-query-parameters',
|
||||
'Custom query parameters'
|
||||
)}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans
|
||||
i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-custom-query-parameters"
|
||||
values={{
|
||||
example1: 'timeout',
|
||||
example2: 'partial_response',
|
||||
example3: 'dedup',
|
||||
example4: 'max_source_resolution',
|
||||
concatenationChar: '‘&’',
|
||||
}}
|
||||
>
|
||||
Add custom parameters to the Prometheus query URL. For example {'{{example1}}'}, {'{{example2}}'},{' '}
|
||||
{'{{example3}}'}, or
|
||||
{'{{example4}}'}. Multiple parameters should be concatenated together with{' '}
|
||||
{'{{concatenationChar}}'}.
|
||||
</Trans>{' '}
|
||||
{docsTip()}
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<Input
|
||||
className="width-20"
|
||||
value={optionsWithDefaults.jsonData.customQueryParameters}
|
||||
onChange={onChangeHandler('customQueryParameters', optionsWithDefaults, onOptionsChange)}
|
||||
spellCheck={false}
|
||||
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}
|
||||
/>
|
||||
</InlineField>
|
||||
</div>
|
||||
</div>
|
||||
<div className="gf-form-inline">
|
||||
{/* HTTP Method */}
|
||||
<div className="gf-form">
|
||||
<InlineField
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-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.
|
||||
</Trans>{' '}
|
||||
{docsTip()}
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
label={t('grafana-prometheus.configuration.prom-settings.label-http-method', 'HTTP method')}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<Select
|
||||
width={40}
|
||||
aria-label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.aria-label-select-http-method',
|
||||
'Select HTTP method'
|
||||
)}
|
||||
options={httpOptions}
|
||||
value={httpOptions.find((o) => o.value === optionsWithDefaults.jsonData.httpMethod)}
|
||||
onChange={onChangeHandler('httpMethod', optionsWithDefaults, onOptionsChange)}
|
||||
data-testid={selectors.components.DataSource.Prometheus.configPage.httpMethod}
|
||||
/>
|
||||
</InlineField>
|
||||
</div>
|
||||
</div>
|
||||
<Box marginBottom={5}>
|
||||
<Stack direction="column" gap={0.5}>
|
||||
<InlineField
|
||||
label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.label-custom-query-parameters',
|
||||
'Custom query parameters'
|
||||
)}
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans
|
||||
i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-custom-query-parameters"
|
||||
values={{
|
||||
example1: 'timeout',
|
||||
example2: 'partial_response',
|
||||
example3: 'dedup',
|
||||
example4: 'max_source_resolution',
|
||||
concatenationChar: '‘&’',
|
||||
}}
|
||||
>
|
||||
Add custom parameters to the Prometheus query URL. For example {'{{example1}}'}, {'{{example2}}'},{' '}
|
||||
{'{{example3}}'}, or
|
||||
{'{{example4}}'}. Multiple parameters should be concatenated together with {'{{concatenationChar}}'}.
|
||||
</Trans>{' '}
|
||||
{docsTip()}
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<Input
|
||||
className="width-20"
|
||||
value={optionsWithDefaults.jsonData.customQueryParameters}
|
||||
onChange={onChangeHandler('customQueryParameters', optionsWithDefaults, onOptionsChange)}
|
||||
spellCheck={false}
|
||||
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}
|
||||
/>
|
||||
</InlineField>
|
||||
{/* HTTP Method */}
|
||||
<InlineField
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
tooltip={
|
||||
<>
|
||||
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-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.
|
||||
</Trans>{' '}
|
||||
{docsTip()}
|
||||
</>
|
||||
}
|
||||
interactive={true}
|
||||
label={t('grafana-prometheus.configuration.prom-settings.label-http-method', 'HTTP method')}
|
||||
disabled={optionsWithDefaults.readOnly}
|
||||
>
|
||||
<Select
|
||||
width={40}
|
||||
aria-label={t(
|
||||
'grafana-prometheus.configuration.prom-settings.aria-label-select-http-method',
|
||||
'Select HTTP method'
|
||||
)}
|
||||
options={httpOptions}
|
||||
value={httpOptions.find((o) => o.value === optionsWithDefaults.jsonData.httpMethod)}
|
||||
onChange={onChangeHandler('httpMethod', optionsWithDefaults, onOptionsChange)}
|
||||
data-testid={selectors.components.DataSource.Prometheus.configPage.httpMethod}
|
||||
/>
|
||||
</InlineField>
|
||||
<InlineField
|
||||
labelWidth={PROM_CONFIG_LABEL_WIDTH}
|
||||
label={t('grafana-prometheus.configuration.prom-settings.label-series-limit', 'Series limit')}
|
||||
@@ -656,8 +622,9 @@ export const PromSettings = (props: Props) => {
|
||||
value={optionsWithDefaults.jsonData.seriesEndpoint ?? false}
|
||||
onChange={onUpdateDatasourceJsonDataOptionChecked(props, 'seriesEndpoint')}
|
||||
/>
|
||||
</InlineField>
|
||||
</div>
|
||||
</InlineField>
|
||||
</Stack>
|
||||
</Box>
|
||||
</ConfigSubSection>
|
||||
|
||||
{!hideExemplars && (
|
||||
|
||||
Reference in New Issue
Block a user