fix grafana-prometheus markup

This commit is contained in:
Ashley Harrison
2025-06-17 14:48:37 +01:00
parent 8b6329a224
commit b8a3814d52
41 changed files with 741 additions and 563 deletions
@@ -33,7 +33,7 @@ export const AnnotationQueryEditor = memo(function AnnotationQueryEditor(props:
if (!annotation || !onAnnotationChange) {
return (
<h3>
<Trans i18nKey="components.annotation-query-editor.annotation-data-load-error">
<Trans i18nKey="grafana-prometheus.components.annotation-query-editor.annotation-data-load-error">
Annotation data load error!
</Trans>
</h3>
@@ -78,10 +78,10 @@ export const AnnotationQueryEditor = memo(function AnnotationQueryEditor(props:
<PromQueryCodeEditor {...props} query={query} showExplain={false} onRunQuery={onRunQuery} onChange={onChange} />
<EditorRow>
<EditorField
label={t('components.annotation-query-editor.label-min-step', 'Min step')}
label={t('grafana-prometheus.components.annotation-query-editor.label-min-step', 'Min step')}
tooltip={
<Trans
i18nKey="components.annotation-query-editor.tooltip-min-step"
i18nKey="grafana-prometheus.components.annotation-query-editor.tooltip-min-step"
values={{ intervalVar: '$__interval', rateIntervalVar: '$__rate_interval' }}
>
An additional lower limit for the step parameter of the Prometheus query and for the{' '}
@@ -92,10 +92,10 @@ export const AnnotationQueryEditor = memo(function AnnotationQueryEditor(props:
<AutoSizeInput
type="text"
aria-label={t(
'components.annotation-query-editor.aria-label-lower-limit-parameter',
'grafana-prometheus.components.annotation-query-editor.aria-label-lower-limit-parameter',
'Set lower limit for the step parameter'
)}
placeholder={t('components.annotation-query-editor.placeholder-auto', 'auto')}
placeholder={t('grafana-prometheus.components.annotation-query-editor.placeholder-auto', 'auto')}
minWidth={10}
value={query.interval ?? ''}
onChange={(e) => handleMinStepChange(e.currentTarget.value)}
@@ -107,9 +107,9 @@ export const AnnotationQueryEditor = memo(function AnnotationQueryEditor(props:
<Space v={0.5} />
<EditorRow>
<EditorField
label={t('components.annotation-query-editor.label-title', 'Title')}
label={t('grafana-prometheus.components.annotation-query-editor.label-title', 'Title')}
tooltip={t(
'components.annotation-query-editor.tooltip-either-pattern-example-instance-replaced-label',
'grafana-prometheus.components.annotation-query-editor.tooltip-either-pattern-example-instance-replaced-label',
'Use either the name or a pattern. For example, {{labelTemplate}} is replaced with label value for the label {{labelName}}.',
{ labelName: 'instance', labelTemplate: '{{instance}}' }
)}
@@ -122,7 +122,7 @@ export const AnnotationQueryEditor = memo(function AnnotationQueryEditor(props:
data-testid={selectors.components.DataSource.Prometheus.annotations.title}
/>
</EditorField>
<EditorField label={t('components.annotation-query-editor.label-tags', 'Tags')}>
<EditorField label={t('grafana-prometheus.components.annotation-query-editor.label-tags', 'Tags')}>
<Input
type="text"
placeholder={PLACEHOLDER_TAGS}
@@ -132,9 +132,9 @@ export const AnnotationQueryEditor = memo(function AnnotationQueryEditor(props:
/>
</EditorField>
<EditorField
label={t('components.annotation-query-editor.label-text', 'Text')}
label={t('grafana-prometheus.components.annotation-query-editor.label-text', 'Text')}
tooltip={t(
'components.annotation-query-editor.tooltip-either-pattern-example-instance-replaced-label',
'grafana-prometheus.components.annotation-query-editor.tooltip-either-pattern-example-instance-replaced-label',
'Use either the name or a pattern. For example, {{labelTemplate}} is replaced with label value for the label {{labelName}}.',
{ labelName: 'instance', labelTemplate: '{{instance}}' }
)}
@@ -148,9 +148,12 @@ export const AnnotationQueryEditor = memo(function AnnotationQueryEditor(props:
/>
</EditorField>
<EditorField
label={t('components.annotation-query-editor.label-series-value-as-timestamp', 'Series value as timestamp')}
label={t(
'grafana-prometheus.components.annotation-query-editor.label-series-value-as-timestamp',
'Series value as timestamp'
)}
tooltip={t(
'components.annotation-query-editor.tooltip-timestamp-milliseconds-series-value-seconds-multiply',
'grafana-prometheus.components.annotation-query-editor.tooltip-timestamp-milliseconds-series-value-seconds-multiply',
'The unit of timestamp is milliseconds. If the unit of the series value is seconds, multiply its range vector by 1000.'
)}
>
@@ -37,7 +37,7 @@ export const PromCheatSheet = (props: QueryEditorHelpProps<PromQuery>) => {
return (
<div>
<h2>
<Trans i18nKey="components.prom-cheat-sheet.prom-ql-cheat-sheet">PromQL Cheat Sheet</Trans>
<Trans i18nKey="grafana-prometheus.components.prom-cheat-sheet.prom-ql-cheat-sheet">PromQL Cheat Sheet</Trans>
</h2>
{CHEAT_SHEET_ITEMS.map((item, index) => (
<div className={styles.cheatSheetItem} key={index}>
@@ -49,13 +49,19 @@ export function PromExemplarField({ datasource, onChange, query, ...rest }: Prop
<InlineLabel width="auto" data-testid={rest['data-testid']}>
<Tooltip content={error ?? ''}>
<div className={styles.iconWrapper}>
<Trans i18nKey="components.prom-exemplar-field.exemplars">Exemplars</Trans>
<Trans i18nKey="grafana-prometheus.components.prom-exemplar-field.exemplars">Exemplars</Trans>
<IconButton
name="eye"
tooltip={
!!query.exemplar
? t('components.prom-exemplar-field.tooltip-disable-query', 'Disable query with exemplars')
: t('components.prom-exemplar-field.tooltip-enable-query', 'Enable query with exemplars')
? t(
'grafana-prometheus.components.prom-exemplar-field.tooltip-disable-query',
'Disable query with exemplars'
)
: t(
'grafana-prometheus.components.prom-exemplar-field.tooltip-enable-query',
'Enable query with exemplars'
)
}
disabled={!!error}
className={iconButtonStyles}
@@ -55,7 +55,10 @@ export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQ
return (
<div
aria-label={t('components.prom-explore-extra-field.aria-label-prometheus-extra-field', 'Prometheus extra field')}
aria-label={t(
'grafana-prometheus.components.prom-explore-extra-field.aria-label-prometheus-extra-field',
'Prometheus extra field'
)}
className="gf-form-inline"
data-testid={promExploreExtraFieldTestIds.extraFieldEditor}
>
@@ -69,10 +72,13 @@ export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQ
flexWrap: 'nowrap',
})
)}
aria-label={t('components.prom-explore-extra-field.aria-label-query-type-field', 'Query type field')}
aria-label={t(
'grafana-prometheus.components.prom-explore-extra-field.aria-label-query-type-field',
'Query type field'
)}
>
<InlineFormLabel width="auto">
<Trans i18nKey="components.prom-explore-extra-field.query-type">Query type</Trans>
<Trans i18nKey="grafana-prometheus.components.prom-explore-extra-field.query-type">Query type</Trans>
</InlineFormLabel>
<RadioButtonGroup
@@ -90,12 +96,12 @@ export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQ
flexWrap: 'nowrap',
})
)}
aria-label={t('components.prom-explore-extra-field.aria-label-step-field', 'Step field')}
aria-label={t('grafana-prometheus.components.prom-explore-extra-field.aria-label-step-field', 'Step field')}
>
<InlineFormLabel
width={6}
tooltip={t(
'components.prom-explore-extra-field.tooltip-units-builtin-variables-example-interval-rateinterval',
'grafana-prometheus.components.prom-explore-extra-field.tooltip-units-builtin-variables-example-interval-rateinterval',
'Time units and built-in variables can be used here, for example: {{example1}}, {{example2}}, {{example3}}, {{example4}}, {{example5}}, {{example6}}, {{example7}} (Default if no unit is specified: {{default}})',
{
example1: '$__interval',
@@ -109,7 +115,7 @@ export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQ
}
)}
>
<Trans i18nKey="components.prom-explore-extra-field.min-step">Min step</Trans>
<Trans i18nKey="grafana-prometheus.components.prom-explore-extra-field.min-step">Min step</Trans>
</InlineFormLabel>
<input
type={'text'}
@@ -133,15 +139,15 @@ export function getQueryTypeOptions(includeBoth: boolean) {
const rangeOptions = [
{
value: 'range',
label: t('components.get-query-type-options.range-options.label.range', 'Range'),
label: t('grafana-prometheus.components.get-query-type-options.range-options.label.range', 'Range'),
description: t(
'components.get-query-type-options.range-options.description.query-range',
'grafana-prometheus.components.get-query-type-options.range-options.description.query-range',
'Run query over a range of time'
),
},
{
value: 'instant',
label: t('components.get-query-type-options.range-options.label.instant', 'Instant'),
label: t('grafana-prometheus.components.get-query-type-options.range-options.label.instant', 'Instant'),
description: 'Run query against a single point in time. For this query, the "To" time is used',
},
];
@@ -149,9 +155,9 @@ export function getQueryTypeOptions(includeBoth: boolean) {
if (includeBoth) {
rangeOptions.push({
value: 'both',
label: t('components.get-query-type-options.label.both', 'Both'),
label: t('grafana-prometheus.components.get-query-type-options.label.both', 'Both'),
description: t(
'components.get-query-type-options.description.instant-query-range',
'grafana-prometheus.components.get-query-type-options.description.instant-query-range',
'Run an Instant query and a Range query'
),
});
@@ -166,7 +166,10 @@ export const PromQueryField = (props: PromQueryFieldProps) => {
onChange={onChangeQuery}
onRunQuery={onRunQuery}
initialValue={query.expr ?? ''}
placeholder={t('components.prom-query-field.placeholder-enter-a-prom-ql-query', 'Enter a PromQL query…')}
placeholder={t(
'grafana-prometheus.components.prom-query-field.placeholder-enter-a-prom-ql-query',
'Enter a PromQL query…'
)}
datasource={datasource}
timeRange={range ?? getDefaultTimeRange()}
/>
@@ -260,19 +260,25 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
<>
<InlineFieldRow>
<InlineField
label={t('components.prom-variable-query-editor.label-query-type', 'Query type')}
label={t('grafana-prometheus.components.prom-variable-query-editor.label-query-type', 'Query type')}
labelWidth={20}
tooltip={
<div>
<Trans i18nKey="components.prom-variable-query-editor.tooltip-query-type">
<Trans i18nKey="grafana-prometheus.components.prom-variable-query-editor.tooltip-query-type">
The Prometheus data source plugin provides the following query types for template variables.
</Trans>
</div>
}
>
<Select
placeholder={t('components.prom-variable-query-editor.placeholder-select-query-type', 'Select query type')}
aria-label={t('components.prom-variable-query-editor.aria-label-query-type', 'Query type')}
placeholder={t(
'grafana-prometheus.components.prom-variable-query-editor.placeholder-select-query-type',
'Select query type'
)}
aria-label={t(
'grafana-prometheus.components.prom-variable-query-editor.aria-label-query-type',
'Query type'
)}
onChange={onQueryTypeChange}
value={qryType}
options={variableOptions}
@@ -286,13 +292,13 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
<>
<InlineFieldRow>
<InlineField
label={t('components.prom-variable-query-editor.label-label', 'Label')}
label={t('grafana-prometheus.components.prom-variable-query-editor.label-label', 'Label')}
labelWidth={20}
required
aria-labelledby="label-select"
tooltip={
<div>
<Trans i18nKey="components.prom-variable-query-editor.tooltip-label">
<Trans i18nKey="grafana-prometheus.components.prom-variable-query-editor.tooltip-label">
Returns a list of label values for the label name in all metrics unless the metric is specified.
</Trans>
</div>
@@ -324,12 +330,12 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
{qryType === QueryType.LabelNames && (
<InlineFieldRow>
<InlineField
label={t('components.prom-variable-query-editor.label-metric-regex', 'Metric regex')}
label={t('grafana-prometheus.components.prom-variable-query-editor.label-metric-regex', 'Metric regex')}
labelWidth={20}
aria-labelledby="Metric regex"
tooltip={
<div>
<Trans i18nKey="components.prom-variable-query-editor.tooltip-metric-regex">
<Trans i18nKey="grafana-prometheus.components.prom-variable-query-editor.tooltip-metric-regex">
Returns a list of label names, optionally filtering by specified metric regex.
</Trans>
</div>
@@ -337,8 +343,14 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
>
<Input
type="text"
aria-label={t('components.prom-variable-query-editor.aria-label-metric-regex', 'Metric regex')}
placeholder={t('components.prom-variable-query-editor.placeholder-metric-regex', 'Metric regex')}
aria-label={t(
'grafana-prometheus.components.prom-variable-query-editor.aria-label-metric-regex',
'Metric regex'
)}
placeholder={t(
'grafana-prometheus.components.prom-variable-query-editor.placeholder-metric-regex',
'Metric regex'
)}
value={labelNamesMatch}
onBlur={(event) => {
setLabelNamesMatch(event.currentTarget.value);
@@ -357,12 +369,12 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
{qryType === QueryType.MetricNames && (
<InlineFieldRow>
<InlineField
label={t('components.prom-variable-query-editor.label-metric-regex', 'Metric regex')}
label={t('grafana-prometheus.components.prom-variable-query-editor.label-metric-regex', 'Metric regex')}
labelWidth={20}
aria-labelledby="Metric selector"
tooltip={
<div>
<Trans i18nKey="components.prom-variable-query-editor.returns-metrics-matching-specified-metric-regex">
<Trans i18nKey="grafana-prometheus.components.prom-variable-query-editor.returns-metrics-matching-specified-metric-regex">
Returns a list of metrics matching the specified metric regex.
</Trans>
</div>
@@ -370,8 +382,14 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
>
<Input
type="text"
aria-label={t('components.prom-variable-query-editor.aria-label-metric-selector', 'Metric selector')}
placeholder={t('components.prom-variable-query-editor.placeholder-metric-regex', 'Metric regex')}
aria-label={t(
'grafana-prometheus.components.prom-variable-query-editor.aria-label-metric-selector',
'Metric selector'
)}
placeholder={t(
'grafana-prometheus.components.prom-variable-query-editor.placeholder-metric-regex',
'Metric regex'
)}
value={metric}
onChange={(e) => {
setMetric(e.currentTarget.value);
@@ -390,12 +408,12 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
{qryType === QueryType.VarQueryResult && (
<InlineFieldRow>
<InlineField
label={t('components.prom-variable-query-editor.label-query', 'Query')}
label={t('grafana-prometheus.components.prom-variable-query-editor.label-query', 'Query')}
labelWidth={20}
tooltip={
<div>
<Trans
i18nKey="components.prom-variable-query-editor.tooltip-query"
i18nKey="grafana-prometheus.components.prom-variable-query-editor.tooltip-query"
values={{ exampleQuery: 'sum(go_goroutines)' }}
>
Returns a list of Prometheus query results for the query. This can include Prometheus functions, i.e.
@@ -406,8 +424,14 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
>
<TextArea
type="text"
aria-label={t('components.prom-variable-query-editor.aria-label-prometheus-query', 'Prometheus Query')}
placeholder={t('components.prom-variable-query-editor.placeholder-prometheus-query', 'Prometheus Query')}
aria-label={t(
'grafana-prometheus.components.prom-variable-query-editor.aria-label-prometheus-query',
'Prometheus Query'
)}
placeholder={t(
'grafana-prometheus.components.prom-variable-query-editor.placeholder-prometheus-query',
'Prometheus Query'
)}
value={varQuery}
onChange={onVarQueryChange}
onBlur={() => {
@@ -425,12 +449,12 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
{qryType === QueryType.SeriesQuery && (
<InlineFieldRow>
<InlineField
label={t('components.prom-variable-query-editor.label-series-query', 'Series Query')}
label={t('grafana-prometheus.components.prom-variable-query-editor.label-series-query', 'Series Query')}
labelWidth={20}
tooltip={
<div>
<Trans
i18nKey="components.prom-variable-query-editor.tooltip-series-query"
i18nKey="grafana-prometheus.components.prom-variable-query-editor.tooltip-series-query"
values={{
example1: 'go_goroutines{instance="localhost:9090"}',
example2: 'go_goroutines',
@@ -446,8 +470,14 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
>
<Input
type="text"
aria-label={t('components.prom-variable-query-editor.aria-label-series-query', 'Series Query')}
placeholder={t('components.prom-variable-query-editor.placeholder-series-query', 'Series Query')}
aria-label={t(
'grafana-prometheus.components.prom-variable-query-editor.aria-label-series-query',
'Series Query'
)}
placeholder={t(
'grafana-prometheus.components.prom-variable-query-editor.placeholder-series-query',
'Series Query'
)}
value={seriesQuery}
onChange={onSeriesQueryChange}
onBlur={() => {
@@ -465,12 +495,12 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
{qryType === QueryType.ClassicQuery && (
<InlineFieldRow>
<InlineField
label={t('components.prom-variable-query-editor.label-classic-query', 'Classic Query')}
label={t('grafana-prometheus.components.prom-variable-query-editor.label-classic-query', 'Classic Query')}
labelWidth={20}
tooltip={
<div>
<Trans
i18nKey="components.prom-variable-query-editor.tooltip-classic-query"
i18nKey="grafana-prometheus.components.prom-variable-query-editor.tooltip-classic-query"
values={{
exampleQuery: 'label_values(label, metric)',
}}
@@ -483,8 +513,14 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
>
<Input
type="text"
aria-label={t('components.prom-variable-query-editor.aria-label-classic-query', 'Classic Query')}
placeholder={t('components.prom-variable-query-editor.placeholder-classic-query', 'Classic Query')}
aria-label={t(
'grafana-prometheus.components.prom-variable-query-editor.aria-label-classic-query',
'Classic Query'
)}
placeholder={t(
'grafana-prometheus.components.prom-variable-query-editor.placeholder-classic-query',
'Classic Query'
)}
value={classicQuery}
onChange={onClassicQueryChange}
onBlur={() => {
@@ -23,17 +23,19 @@ export function LabelSelector() {
<div className={styles.section}>
<Label
description={t(
'components.label-selector.description-select-labels',
'grafana-prometheus.components.label-selector.description-select-labels',
'Once label values are selected, only possible label combinations are shown.'
)}
>
<Trans i18nKey="components.label-selector.select-labels-to-search-in">2. Select labels to search in</Trans>
<Trans i18nKey="grafana-prometheus.components.label-selector.select-labels-to-search-in">
2. Select labels to search in
</Trans>
</Label>
<div>
<Input
onChange={(e) => setLabelSearchTerm(e.currentTarget.value)}
aria-label={t(
'components.label-selector.aria-label-filter-expression-for-label',
'grafana-prometheus.components.label-selector.aria-label-filter-expression-for-label',
'Filter expression for label'
)}
value={labelSearchTerm}
@@ -23,17 +23,17 @@ export function MetricSelector() {
<div className={styles.section}>
<Label
description={t(
'components.metric-selector.label-select-metric',
'grafana-prometheus.components.metric-selector.label-select-metric',
'Once a metric is selected only possible labels are shown. Labels are limited by the series limit below.'
)}
>
<Trans i18nKey="components.metric-selector.select-a-metric">1. Select a metric</Trans>
<Trans i18nKey="grafana-prometheus.components.metric-selector.select-a-metric">1. Select a metric</Trans>
</Label>
<div>
<Input
onChange={(e) => setMetricSearchTerm(e.currentTarget.value)}
aria-label={t(
'components.metric-selector.aria-label-filter-expression-for-metric',
'grafana-prometheus.components.metric-selector.aria-label-filter-expression-for-metric',
'Filter expression for metric'
)}
value={metricSearchTerm}
@@ -42,17 +42,17 @@ export function MetricSelector() {
</div>
<Label
description={t(
'components.metric-selector.description-series-limit',
'grafana-prometheus.components.metric-selector.description-series-limit',
'The limit applies to all metrics, labels, and values. Leave the field empty to use the default limit. Set to 0 to disable the limit and fetch everything — this may cause performance issues.'
)}
>
<Trans i18nKey="components.metric-selector.series-limit">Series limit</Trans>
<Trans i18nKey="grafana-prometheus.components.metric-selector.series-limit">Series limit</Trans>
</Label>
<div>
<Input
onChange={(e) => setSeriesLimit(e.currentTarget.value.trim())}
aria-label={t(
'components.metric-selector.aria-label-limit-results-from-series-endpoint',
'grafana-prometheus.components.metric-selector.aria-label-limit-results-from-series-endpoint',
'Limit results from series endpoint'
)}
value={seriesLimit}
@@ -29,9 +29,12 @@ export function SelectorActions() {
return (
<div className={styles.section}>
<Label>
<Trans i18nKey="components.selector-actions.resulting-selector">4. Resulting selector</Trans>
<Trans i18nKey="grafana-prometheus.components.selector-actions.resulting-selector">4. Resulting selector</Trans>
</Label>
<div aria-label={t('components.selector-actions.aria-label-selector', 'selector')} className={styles.selector}>
<div
aria-label={t('grafana-prometheus.components.selector-actions.aria-label-selector', 'selector')}
className={styles.selector}
>
{selector}
</div>
{validationStatus && <div className={styles.validationStatus}>{validationStatus}</div>}
@@ -39,42 +42,48 @@ export function SelectorActions() {
<Button
data-testid={selectors.components.DataSource.Prometheus.queryEditor.code.metricsBrowser.useQuery}
aria-label={t(
'components.selector-actions.aria-label-use-selector-for-query-button',
'grafana-prometheus.components.selector-actions.aria-label-use-selector-for-query-button',
'Use selector for query button'
)}
disabled={empty}
onClick={onClickRunQuery}
>
<Trans i18nKey="components.selector-actions.use-query">Use query</Trans>
<Trans i18nKey="grafana-prometheus.components.selector-actions.use-query">Use query</Trans>
</Button>
<Button
data-testid={selectors.components.DataSource.Prometheus.queryEditor.code.metricsBrowser.useAsRateQuery}
aria-label={t(
'components.selector-actions.aria-label-use-selector-as-metrics-button',
'grafana-prometheus.components.selector-actions.aria-label-use-selector-as-metrics-button',
'Use selector as metrics button'
)}
variant="secondary"
disabled={empty}
onClick={onClickRunRateQuery}
>
<Trans i18nKey="components.selector-actions.use-as-rate-query">Use as rate query</Trans>
<Trans i18nKey="grafana-prometheus.components.selector-actions.use-as-rate-query">Use as rate query</Trans>
</Button>
<Button
data-testid={selectors.components.DataSource.Prometheus.queryEditor.code.metricsBrowser.validateSelector}
aria-label={t('components.selector-actions.aria-label-validate-submit-button', 'Validate submit button')}
aria-label={t(
'grafana-prometheus.components.selector-actions.aria-label-validate-submit-button',
'Validate submit button'
)}
variant="secondary"
disabled={empty}
onClick={onValidationClick}
>
<Trans i18nKey="components.selector-actions.validate-selector">Validate selector</Trans>
<Trans i18nKey="grafana-prometheus.components.selector-actions.validate-selector">Validate selector</Trans>
</Button>
<Button
data-testid={selectors.components.DataSource.Prometheus.queryEditor.code.metricsBrowser.clear}
aria-label={t('components.selector-actions.aria-label-selector-clear-button', 'Selector clear button')}
aria-label={t(
'grafana-prometheus.components.selector-actions.aria-label-selector-clear-button',
'Selector clear button'
)}
variant="secondary"
onClick={onClearClick}
>
<Trans i18nKey="components.selector-actions.clear">Clear</Trans>
<Trans i18nKey="grafana-prometheus.components.selector-actions.clear">Clear</Trans>
</Button>
<div className={cx(styles.status, (status || err) && styles.statusShowing)}>
<span className={err ? styles.error : ''}>{err || status}</span>
@@ -18,11 +18,11 @@ export function ValueSelector() {
<div className={styles.section}>
<Label
description={t(
'components.value-selector.description-search-field-values-across-selected-labels',
'grafana-prometheus.components.value-selector.description-search-field-values-across-selected-labels',
'Use the search field to find values across selected labels.'
)}
>
<Trans i18nKey="components.value-selector.select-multiple-values-for-your-labels">
<Trans i18nKey="grafana-prometheus.components.value-selector.select-multiple-values-for-your-labels">
3. Select (multiple) values for your labels
</Trans>
</Label>
@@ -30,7 +30,7 @@ export function ValueSelector() {
<Input
onChange={(e) => setValueSearchTerm(e.currentTarget.value)}
aria-label={t(
'components.value-selector.aria-label-filter-expression-for-label-values',
'grafana-prometheus.components.value-selector.aria-label-filter-expression-for-label-values',
'Filter expression for label values'
)}
value={valueSearchTerm}
@@ -47,9 +47,13 @@ export function ValueSelector() {
<div
role="list"
key={lk}
aria-label={t('components.value-selector.aria-label-values-for', 'Values for {{labelKey}}', {
labelKey: lk,
})}
aria-label={t(
'grafana-prometheus.components.value-selector.aria-label-values-for',
'Values for {{labelKey}}',
{
labelKey: lk,
}
)}
className={styles.valueListWrapper}
>
<div className={styles.valueTitle}>
@@ -28,7 +28,7 @@ export function AlertingSettingsOverhaul<T extends AlertingConfig>({
return (
<ConfigSubSection
title={t('configuration.alerting-settings-overhaul.title-alerting', 'Alerting')}
title={t('grafana-prometheus.configuration.alerting-settings-overhaul.title-alerting', 'Alerting')}
className={cx(styles.container, styles.alertingTop)}
>
<div className="gf-form-group">
@@ -37,13 +37,13 @@ export function AlertingSettingsOverhaul<T extends AlertingConfig>({
<InlineField
labelWidth={30}
label={t(
'configuration.alerting-settings-overhaul.label-manage-alerts-via-alerting-ui',
'grafana-prometheus.configuration.alerting-settings-overhaul.label-manage-alerts-via-alerting-ui',
'Manage alerts via Alerting UI'
)}
disabled={options.readOnly}
tooltip={
<>
<Trans i18nKey="configuration.alerting-settings-overhaul.tooltip-manage-alerts-via-alerting-ui">
<Trans i18nKey="grafana-prometheus.configuration.alerting-settings-overhaul.tooltip-manage-alerts-via-alerting-ui">
Manage alert rules for this data source. To manage other alerting resources, add an Alertmanager
data source.
</Trans>{' '}
@@ -22,8 +22,8 @@ export const ConfigEditor = (props: PrometheusConfigProps) => {
return (
<>
{options.access === 'direct' && (
<Alert title={t('configuration.config-editor.title-error', 'Error')} severity="error">
<Trans i18nKey="configuration.config-editor.browser-access-mode-error">
<Alert title={t('grafana-prometheus.configuration.config-editor.title-error', 'Error')} severity="error">
<Trans i18nKey="grafana-prometheus.configuration.config-editor.browser-access-mode-error">
Browser access mode in the Prometheus data source is no longer available. Switch to server access mode.
</Trans>
</Alert>
@@ -41,9 +41,9 @@ export const ConfigEditor = (props: PrometheusConfigProps) => {
<hr />
<ConfigSection
className={styles.advancedSettings}
title={t('configuration.config-editor.title-advanced-settings', 'Advanced settings')}
title={t('grafana-prometheus.configuration.config-editor.title-advanced-settings', 'Advanced settings')}
description={t(
'configuration.config-editor.description-advanced-settings',
'grafana-prometheus.configuration.config-editor.description-advanced-settings',
'Additional settings are optional settings that can be configured for more control over your data source.'
)}
>
@@ -35,7 +35,7 @@ export const DataSourceHttpSettingsOverhaul = (props: DataSourceHttpSettingsProp
case 'direct':
urlTooltip = (
<>
<Trans i18nKey="configuration.data-source-http-settings-overhaul.tooltip-browser-access-mode">
<Trans i18nKey="grafana-prometheus.configuration.data-source-http-settings-overhaul.tooltip-browser-access-mode">
Your access method is <em>Browser</em>, this means the URL needs to be accessible from the browser.
</Trans>
{docsTip()}
@@ -45,7 +45,7 @@ export const DataSourceHttpSettingsOverhaul = (props: DataSourceHttpSettingsProp
case 'proxy':
urlTooltip = (
<>
<Trans i18nKey="configuration.data-source-http-settings-overhaul.tooltip-server-access-mode">
<Trans i18nKey="grafana-prometheus.configuration.data-source-http-settings-overhaul.tooltip-server-access-mode">
Your access method is <em>Server</em>, this means the URL needs to be accessible from the grafana
backend/server.
</Trans>
@@ -57,7 +57,7 @@ export const DataSourceHttpSettingsOverhaul = (props: DataSourceHttpSettingsProp
urlTooltip = (
<>
<Trans
i18nKey="configuration.data-source-http-settings-overhaul.tooltip-http-url"
i18nKey="grafana-prometheus.configuration.data-source-http-settings-overhaul.tooltip-http-url"
values={{ exampleURL: 'http://your_server:8080' }}
>
Specify a complete HTTP URL (for example {'{{exampleURL}}'})
@@ -28,12 +28,12 @@ export function ExemplarSetting({ value, onChange, onDelete, disabled }: Props)
return (
<div className="gf-form-group">
<InlineField
label={t('configuration.exemplar-setting.label-internal-link', 'Internal link')}
label={t('grafana-prometheus.configuration.exemplar-setting.label-internal-link', 'Internal link')}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
disabled={disabled}
tooltip={
<>
<Trans i18nKey="configuration.exemplar-setting.tooltip-internal-link">
<Trans i18nKey="grafana-prometheus.configuration.exemplar-setting.tooltip-internal-link">
Enable this option if you have an internal link. When enabled, this reveals the data source selector.
Select the backend tracing data store for your exemplar data.
</Trans>{' '}
@@ -54,11 +54,11 @@ export function ExemplarSetting({ value, onChange, onDelete, disabled }: Props)
{isInternalLink ? (
<InlineField
label={t('configuration.exemplar-setting.label-data-source', 'Data source')}
label={t('grafana-prometheus.configuration.exemplar-setting.label-data-source', 'Data source')}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
tooltip={
<>
<Trans i18nKey="configuration.exemplar-setting.tooltip-data-source">
<Trans i18nKey="grafana-prometheus.configuration.exemplar-setting.tooltip-data-source">
The data source the exemplar is going to navigate to.
</Trans>{' '}
{docsTip()}
@@ -88,11 +88,11 @@ export function ExemplarSetting({ value, onChange, onDelete, disabled }: Props)
</InlineField>
) : (
<InlineField
label={t('configuration.exemplar-setting.label-url', 'URL')}
label={t('grafana-prometheus.configuration.exemplar-setting.label-url', 'URL')}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
tooltip={
<>
<Trans i18nKey="configuration.exemplar-setting.tooltip-url">
<Trans i18nKey="grafana-prometheus.configuration.exemplar-setting.tooltip-url">
The URL of the trace backend the user would go to see its trace
</Trans>{' '}
{docsTip()}
@@ -103,7 +103,7 @@ export function ExemplarSetting({ value, onChange, onDelete, disabled }: Props)
>
<Input
placeholder={t(
'configuration.exemplar-setting.placeholder-httpsexamplecomvalueraw',
'grafana-prometheus.configuration.exemplar-setting.placeholder-httpsexamplecomvalueraw',
'https://example.com/${__value.raw}'
)}
spellCheck={false}
@@ -121,11 +121,11 @@ export function ExemplarSetting({ value, onChange, onDelete, disabled }: Props)
)}
<InlineField
label={t('configuration.exemplar-setting.label-url-label', 'URL Label')}
label={t('grafana-prometheus.configuration.exemplar-setting.label-url-label', 'URL Label')}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
tooltip={
<>
<Trans i18nKey="configuration.exemplar-setting.tooltip-url-label">
<Trans i18nKey="grafana-prometheus.configuration.exemplar-setting.tooltip-url-label">
Use to override the button label on the exemplar traceID field.
</Trans>{' '}
{docsTip()}
@@ -135,7 +135,10 @@ export function ExemplarSetting({ value, onChange, onDelete, disabled }: Props)
interactive={true}
>
<Input
placeholder={t('configuration.exemplar-setting.placeholder-go-to-examplecom', 'Go to example.com')}
placeholder={t(
'grafana-prometheus.configuration.exemplar-setting.placeholder-go-to-examplecom',
'Go to example.com'
)}
spellCheck={false}
width={40}
value={value.urlDisplayLabel}
@@ -148,11 +151,11 @@ export function ExemplarSetting({ value, onChange, onDelete, disabled }: Props)
/>
</InlineField>
<InlineField
label={t('configuration.exemplar-setting.label-label-name', 'Label name')}
label={t('grafana-prometheus.configuration.exemplar-setting.label-label-name', 'Label name')}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
tooltip={
<>
<Trans i18nKey="configuration.exemplar-setting.tooltip-label-name">
<Trans i18nKey="grafana-prometheus.configuration.exemplar-setting.tooltip-label-name">
The name of the field in the labels object that should be used to get the traceID.
</Trans>{' '}
{docsTip()}
@@ -162,7 +165,7 @@ export function ExemplarSetting({ value, onChange, onDelete, disabled }: Props)
interactive={true}
>
<Input
placeholder={t('configuration.exemplar-setting.placeholder-trace-id', 'traceID')}
placeholder={t('grafana-prometheus.configuration.exemplar-setting.placeholder-trace-id', 'traceID')}
spellCheck={false}
width={40}
value={value.name}
@@ -176,13 +179,19 @@ export function ExemplarSetting({ value, onChange, onDelete, disabled }: Props)
</InlineField>
{!disabled && (
<InlineField
label={t('configuration.exemplar-setting.label-remove-exemplar-link', 'Remove exemplar link')}
label={t(
'grafana-prometheus.configuration.exemplar-setting.label-remove-exemplar-link',
'Remove exemplar link'
)}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
disabled={disabled}
>
<Button
variant="destructive"
title={t('configuration.exemplar-setting.title-remove-exemplar-link', 'Remove exemplar link')}
title={t(
'grafana-prometheus.configuration.exemplar-setting.title-remove-exemplar-link',
'Remove exemplar link'
)}
icon="times"
onClick={(event) => {
event.preventDefault();
@@ -23,7 +23,7 @@ export function ExemplarsSettings({ options, onChange, disabled }: Props) {
return (
<div className={styles.sectionBottomPadding}>
<ConfigSubSection
title={t('configuration.exemplars-settings.title-exemplars', 'Exemplars')}
title={t('grafana-prometheus.configuration.exemplars-settings.title-exemplars', 'Exemplars')}
className={styles.container}
>
{options &&
@@ -61,12 +61,12 @@ export function ExemplarsSettings({ options, onChange, disabled }: Props) {
onChange(newOptions);
}}
>
<Trans i18nKey="configuration.exemplars-settings.add">Add</Trans>
<Trans i18nKey="grafana-prometheus.configuration.exemplars-settings.add">Add</Trans>
</Button>
)}
{disabled && !options && (
<i>
<Trans i18nKey="configuration.exemplars-settings.no-exemplars-configurations">
<Trans i18nKey="grafana-prometheus.configuration.exemplars-settings.no-exemplars-configurations">
No exemplars configurations
</Trans>
</i>
@@ -100,7 +100,7 @@ export const PromSettings = (props: Props) => {
return (
<>
<ConfigSubSection
title={t('configuration.prom-settings.title-interval-behaviour', 'Interval behaviour')}
title={t('grafana-prometheus.configuration.prom-settings.title-interval-behaviour', 'Interval behaviour')}
className={styles.container}
>
<div className="gf-form-group">
@@ -108,11 +108,14 @@ export const PromSettings = (props: Props) => {
<div className="gf-form-inline">
<div className="gf-form">
<InlineField
label={t('configuration.prom-settings.label-scrape-interval', 'Scrape interval')}
label={t('grafana-prometheus.configuration.prom-settings.label-scrape-interval', 'Scrape interval')}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
tooltip={
<>
<Trans i18nKey="configuration.prom-settings.tooltip-scrape-interval" values={{ default: '15s' }}>
<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
@@ -149,11 +152,11 @@ export const PromSettings = (props: Props) => {
<div className="gf-form-inline">
<div className="gf-form">
<InlineField
label={t('configuration.prom-settings.label-query-timeout', 'Query timeout')}
label={t('grafana-prometheus.configuration.prom-settings.label-query-timeout', 'Query timeout')}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
tooltip={
<>
<Trans i18nKey="configuration.prom-settings.tooltip-query-timeout">
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-query-timeout">
Set the Prometheus query timeout.
</Trans>{' '}
{docsTip()}
@@ -187,17 +190,17 @@ export const PromSettings = (props: Props) => {
</ConfigSubSection>
<ConfigSubSection
title={t('configuration.prom-settings.title-query-editor', 'Query editor')}
title={t('grafana-prometheus.configuration.prom-settings.title-query-editor', 'Query editor')}
className={styles.container}
>
<div className="gf-form-group">
<div className="gf-form">
<InlineField
label={t('configuration.prom-settings.label-default-editor', 'Default editor')}
label={t('grafana-prometheus.configuration.prom-settings.label-default-editor', 'Default editor')}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
tooltip={
<>
<Trans i18nKey="configuration.prom-settings.tooltip-default-editor">
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-default-editor">
Set default editor option for all users of this data source.
</Trans>{' '}
{docsTip()}
@@ -208,7 +211,7 @@ export const PromSettings = (props: Props) => {
>
<Select
aria-label={t(
'configuration.prom-settings.aria-label-default-editor',
'grafana-prometheus.configuration.prom-settings.aria-label-default-editor',
'Default Editor (Code or Builder)'
)}
options={editorOptions}
@@ -225,10 +228,13 @@ export const PromSettings = (props: Props) => {
<div className="gf-form">
<InlineField
labelWidth={PROM_CONFIG_LABEL_WIDTH}
label={t('configuration.prom-settings.label-disable-metrics-lookup', 'Disable metrics lookup')}
label={t(
'grafana-prometheus.configuration.prom-settings.label-disable-metrics-lookup',
'Disable metrics lookup'
)}
tooltip={
<>
<Trans i18nKey="configuration.prom-settings.tooltip-disable-metrics-lookup">
<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&apos;s autocomplete. This helps if you have performance issues with bigger Prometheus
instances.{' '}
@@ -251,14 +257,14 @@ export const PromSettings = (props: Props) => {
</ConfigSubSection>
<ConfigSubSection
title={t('configuration.prom-settings.title-performance', 'Performance')}
title={t('grafana-prometheus.configuration.prom-settings.title-performance', 'Performance')}
className={styles.container}
>
{!optionsWithDefaults.jsonData.prometheusType &&
!optionsWithDefaults.jsonData.prometheusVersion &&
optionsWithDefaults.readOnly && (
<div className={styles.versionMargin}>
<Trans i18nKey="configuration.prom-settings.more-info">
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.more-info">
For more information on configuring prometheus type and version in data sources, see the{' '}
<TextLink external href="https://grafana.com/docs/grafana/latest/administration/provisioning/">
provisioning documentation
@@ -271,12 +277,12 @@ export const PromSettings = (props: Props) => {
<div className="gf-form-inline">
<div className="gf-form">
<InlineField
label={t('configuration.prom-settings.label-prometheus-type', 'Prometheus type')}
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="configuration.prom-settings.tooltip-prometheus-type">
<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
@@ -291,7 +297,10 @@ export const PromSettings = (props: Props) => {
disabled={optionsWithDefaults.readOnly}
>
<Select
aria-label={t('configuration.prom-settings.aria-label-prometheus-type', 'Prometheus type')}
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
@@ -307,14 +316,18 @@ export const PromSettings = (props: Props) => {
{optionsWithDefaults.jsonData.prometheusType && (
<div className="gf-form">
<InlineField
label={t('configuration.prom-settings.label-prom-type-version', '{{promType}} version', {
promType: optionsWithDefaults.jsonData.prometheusType,
})}
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="configuration.prom-settings.tooltip-prom-type-version"
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
@@ -327,9 +340,13 @@ export const PromSettings = (props: Props) => {
disabled={optionsWithDefaults.readOnly}
>
<Select
aria-label={t('configuration.prom-settings.aria-label-prom-type-type', '{{promType}} type', {
promType: optionsWithDefaults.jsonData.prometheusType,
})}
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
@@ -346,11 +363,11 @@ export const PromSettings = (props: Props) => {
<div className="gf-form-inline">
<div className="gf-form max-width-30">
<InlineField
label={t('configuration.prom-settings.label-cache-level', 'Cache level')}
label={t('grafana-prometheus.configuration.prom-settings.label-cache-level', 'Cache level')}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
tooltip={
<>
<Trans i18nKey="configuration.prom-settings.tooltip-cache-level">
<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>
@@ -378,13 +395,13 @@ export const PromSettings = (props: Props) => {
<div className="gf-form">
<InlineField
label={t(
'configuration.prom-settings.label-metric-names-suggestion-limit',
'grafana-prometheus.configuration.prom-settings.label-metric-names-suggestion-limit',
'Metric names suggestion limit'
)}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
tooltip={
<>
<Trans i18nKey="configuration.prom-settings.tooltip-metric-names-suggestion-limit">
<Trans i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-metric-names-suggestion-limit">
The maximum number of metric names that may appear as autocomplete suggestions in the query
editor&apos;s Code mode.
</Trans>
@@ -428,11 +445,14 @@ export const PromSettings = (props: Props) => {
<div className="gf-form-inline">
<div className="gf-form max-width-30">
<InlineField
label={t('configuration.prom-settings.label-incremental-querying-beta', 'Incremental querying (beta)')}
label={t(
'grafana-prometheus.configuration.prom-settings.label-incremental-querying-beta',
'Incremental querying (beta)'
)}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
tooltip={
<>
<Trans i18nKey="configuration.prom-settings.tooltip-incremental-querying-beta">
<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.
@@ -455,12 +475,15 @@ export const PromSettings = (props: Props) => {
<div className="gf-form-inline">
{optionsWithDefaults.jsonData.incrementalQuerying && (
<InlineField
label={t('configuration.prom-settings.label-query-overlap-window', 'Query overlap window')}
label={t(
'grafana-prometheus.configuration.prom-settings.label-query-overlap-window',
'Query overlap window'
)}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
tooltip={
<>
<Trans
i18nKey="configuration.prom-settings.tooltip-query-overlap-window"
i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-query-overlap-window"
values={{
example1: '10m',
example2: '120s',
@@ -502,13 +525,13 @@ export const PromSettings = (props: Props) => {
<div className="gf-form max-width-30">
<InlineField
label={t(
'configuration.prom-settings.label-disable-recording-rules-beta',
'grafana-prometheus.configuration.prom-settings.label-disable-recording-rules-beta',
'Disable recording rules (beta)'
)}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
tooltip={
<>
<Trans i18nKey="configuration.prom-settings.tooltip-disable-recording-rules-beta">
<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>
</>
@@ -528,17 +551,23 @@ export const PromSettings = (props: Props) => {
</div>
</ConfigSubSection>
<ConfigSubSection title={t('configuration.prom-settings.title-other', 'Other')} className={styles.container}>
<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('configuration.prom-settings.label-custom-query-parameters', 'Custom query parameters')}
label={t(
'grafana-prometheus.configuration.prom-settings.label-custom-query-parameters',
'Custom query parameters'
)}
labelWidth={PROM_CONFIG_LABEL_WIDTH}
tooltip={
<>
<Trans
i18nKey="configuration.prom-settings.tooltip-custom-query-parameters"
i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-custom-query-parameters"
values={{
example1: 'timeout',
example2: 'partial_response',
@@ -564,7 +593,7 @@ export const PromSettings = (props: Props) => {
onChange={onChangeHandler('customQueryParameters', optionsWithDefaults, onOptionsChange)}
spellCheck={false}
placeholder={t(
'configuration.prom-settings.placeholder-example-maxsourceresolutionmtimeout',
'grafana-prometheus.configuration.prom-settings.placeholder-example-maxsourceresolutionmtimeout',
'Example: {{example}}',
{ example: 'max_source_resolution=5m&timeout=10' }
)}
@@ -580,7 +609,7 @@ export const PromSettings = (props: Props) => {
labelWidth={PROM_CONFIG_LABEL_WIDTH}
tooltip={
<>
<Trans i18nKey="configuration.prom-settings.tooltip-http-method">
<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.
@@ -589,12 +618,15 @@ export const PromSettings = (props: Props) => {
</>
}
interactive={true}
label={t('configuration.prom-settings.label-http-method', 'HTTP method')}
label={t('grafana-prometheus.configuration.prom-settings.label-http-method', 'HTTP method')}
disabled={optionsWithDefaults.readOnly}
>
<Select
width={40}
aria-label={t('configuration.prom-settings.aria-label-select-http-method', 'Select HTTP method')}
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)}
@@ -605,11 +637,11 @@ export const PromSettings = (props: Props) => {
</div>
<InlineField
labelWidth={PROM_CONFIG_LABEL_WIDTH}
label={t('configuration.prom-settings.label-use-series-endpoint', 'Use series endpoint')}
label={t('grafana-prometheus.configuration.prom-settings.label-use-series-endpoint', 'Use series endpoint')}
tooltip={
<>
<Trans
i18nKey="configuration.prom-settings.tooltip-use-series-endpoint"
i18nKey="grafana-prometheus.configuration.prom-settings.tooltip-use-series-endpoint"
values={{ exampleParameter: 'match[]' }}
>
Checking this option will favor the series endpoint with {'{{exampleParameter}}'} parameter over the
@@ -14,7 +14,9 @@ export function docsTip(url?: string) {
return (
<TextLink href={url ? url : docsUrl} external>
<Trans i18nKey="configuration.docs-tip.visit-docs-for-more-details-here">Visit docs for more details here.</Trans>
<Trans i18nKey="grafana-prometheus.configuration.docs-tip.visit-docs-for-more-details-here">
Visit docs for more details here.
</Trans>
</TextLink>
);
}
@@ -1,337 +1,339 @@
{
"components": {
"annotation-query-editor": {
"annotation-data-load-error": "Annotation data load error!",
"aria-label-lower-limit-parameter": "Set lower limit for the step parameter",
"label-min-step": "Min step",
"label-series-value-as-timestamp": "Series value as timestamp",
"label-tags": "Tags",
"label-text": "Text",
"label-title": "Title",
"placeholder-auto": "auto",
"tooltip-either-pattern-example-instance-replaced-label": "Use either the name or a pattern. For example, {{labelTemplate}} is replaced with label value for the label {{labelName}}.",
"tooltip-min-step": "An additional lower limit for the step parameter of the Prometheus query and for the <2>{{intervalVar}}</2> and <4>{{rateIntervalVar}}</4> variables.",
"tooltip-timestamp-milliseconds-series-value-seconds-multiply": "The unit of timestamp is milliseconds. If the unit of the series value is seconds, multiply its range vector by 1000."
},
"get-query-type-options": {
"description": {
"instant-query-range": "Run an Instant query and a Range query"
"grafana-prometheus": {
"components": {
"annotation-query-editor": {
"annotation-data-load-error": "Annotation data load error!",
"aria-label-lower-limit-parameter": "Set lower limit for the step parameter",
"label-min-step": "Min step",
"label-series-value-as-timestamp": "Series value as timestamp",
"label-tags": "Tags",
"label-text": "Text",
"label-title": "Title",
"placeholder-auto": "auto",
"tooltip-either-pattern-example-instance-replaced-label": "Use either the name or a pattern. For example, {{labelTemplate}} is replaced with label value for the label {{labelName}}.",
"tooltip-min-step": "An additional lower limit for the step parameter of the Prometheus query and for the <2>{{intervalVar}}</2> and <4>{{rateIntervalVar}}</4> variables.",
"tooltip-timestamp-milliseconds-series-value-seconds-multiply": "The unit of timestamp is milliseconds. If the unit of the series value is seconds, multiply its range vector by 1000."
},
"label": {
"both": "Both"
},
"range-options": {
"get-query-type-options": {
"description": {
"query-range": "Run query over a range of time"
"instant-query-range": "Run an Instant query and a Range query"
},
"label": {
"instant": "Instant",
"range": "Range"
"both": "Both"
},
"range-options": {
"description": {
"query-range": "Run query over a range of time"
},
"label": {
"instant": "Instant",
"range": "Range"
}
}
},
"label-selector": {
"aria-label-filter-expression-for-label": "Filter expression for label",
"description-select-labels": "Once label values are selected, only possible label combinations are shown.",
"select-labels-to-search-in": "2. Select labels to search in"
},
"metric-selector": {
"aria-label-filter-expression-for-metric": "Filter expression for metric",
"aria-label-limit-results-from-series-endpoint": "Limit results from series endpoint",
"description-series-limit": "The limit applies to all metrics, labels, and values. Leave the field empty to use the default limit. Set to 0 to disable the limit and fetch everything — this may cause performance issues.",
"label-select-metric": "Once a metric is selected only possible labels are shown. Labels are limited by the series limit below.",
"select-a-metric": "1. Select a metric",
"series-limit": "Series limit"
},
"prom-cheat-sheet": {
"prom-ql-cheat-sheet": "PromQL Cheat Sheet"
},
"prom-exemplar-field": {
"exemplars": "Exemplars",
"tooltip-disable-query": "Disable query with exemplars",
"tooltip-enable-query": "Enable query with exemplars"
},
"prom-explore-extra-field": {
"aria-label-prometheus-extra-field": "Prometheus extra field",
"aria-label-query-type-field": "Query type field",
"aria-label-step-field": "Step field",
"min-step": "Min step",
"query-type": "Query type",
"tooltip-units-builtin-variables-example-interval-rateinterval": "Time units and built-in variables can be used here, for example: {{example1}}, {{example2}}, {{example3}}, {{example4}}, {{example5}}, {{example6}}, {{example7}} (Default if no unit is specified: {{default}})"
},
"prom-query-field": {
"placeholder-enter-a-prom-ql-query": "Enter a PromQL query…"
},
"prom-variable-query-editor": {
"aria-label-classic-query": "Classic Query",
"aria-label-metric-regex": "Metric regex",
"aria-label-metric-selector": "Metric selector",
"aria-label-prometheus-query": "Prometheus Query",
"aria-label-query-type": "Query type",
"aria-label-series-query": "Series Query",
"label-classic-query": "Classic Query",
"label-label": "Label",
"label-metric-regex": "Metric regex",
"label-query": "Query",
"label-query-type": "Query type",
"label-series-query": "Series Query",
"placeholder-classic-query": "Classic Query",
"placeholder-metric-regex": "Metric regex",
"placeholder-prometheus-query": "Prometheus Query",
"placeholder-select-query-type": "Select query type",
"placeholder-series-query": "Series Query",
"returns-metrics-matching-specified-metric-regex": "Returns a list of metrics matching the specified metric regex.",
"tooltip-classic-query": "The original implemetation of the Prometheus variable query editor. Enter a string with the correct query type and parameters as described in these docs. For example, {{exampleQuery}}.",
"tooltip-label": "Returns a list of label values for the label name in all metrics unless the metric is specified.",
"tooltip-metric-regex": "Returns a list of label names, optionally filtering by specified metric regex.",
"tooltip-query": "Returns a list of Prometheus query results for the query. This can include Prometheus functions, i.e.{{exampleQuery}}.",
"tooltip-query-type": "The Prometheus data source plugin provides the following query types for template variables.",
"tooltip-series-query": "Enter a metric with labels, only a metric or only labels, i.e.{{example1}}, {{example2}}, or {{example3}}. Returns a list of time series associated with the entered data."
},
"selector-actions": {
"aria-label-selector": "selector",
"aria-label-selector-clear-button": "Selector clear button",
"aria-label-use-selector-as-metrics-button": "Use selector as metrics button",
"aria-label-use-selector-for-query-button": "Use selector for query button",
"aria-label-validate-submit-button": "Validate submit button",
"clear": "Clear",
"resulting-selector": "4. Resulting selector",
"use-as-rate-query": "Use as rate query",
"use-query": "Use query",
"validate-selector": "Validate selector"
},
"value-selector": {
"aria-label-filter-expression-for-label-values": "Filter expression for label values",
"aria-label-values-for": "Values for {{labelKey}}",
"description-search-field-values-across-selected-labels": "Use the search field to find values across selected labels.",
"select-multiple-values-for-your-labels": "3. Select (multiple) values for your labels"
}
},
"label-selector": {
"aria-label-filter-expression-for-label": "Filter expression for label",
"description-select-labels": "Once label values are selected, only possible label combinations are shown.",
"select-labels-to-search-in": "2. Select labels to search in"
},
"metric-selector": {
"aria-label-filter-expression-for-metric": "Filter expression for metric",
"aria-label-limit-results-from-series-endpoint": "Limit results from series endpoint",
"description-series-limit": "The limit applies to all metrics, labels, and values. Leave the field empty to use the default limit. Set to 0 to disable the limit and fetch everything — this may cause performance issues.",
"label-select-metric": "Once a metric is selected only possible labels are shown. Labels are limited by the series limit below.",
"select-a-metric": "1. Select a metric",
"series-limit": "Series limit"
},
"prom-cheat-sheet": {
"prom-ql-cheat-sheet": "PromQL Cheat Sheet"
},
"prom-exemplar-field": {
"exemplars": "Exemplars",
"tooltip-disable-query": "Disable query with exemplars",
"tooltip-enable-query": "Enable query with exemplars"
},
"prom-explore-extra-field": {
"aria-label-prometheus-extra-field": "Prometheus extra field",
"aria-label-query-type-field": "Query type field",
"aria-label-step-field": "Step field",
"min-step": "Min step",
"query-type": "Query type",
"tooltip-units-builtin-variables-example-interval-rateinterval": "Time units and built-in variables can be used here, for example: {{example1}}, {{example2}}, {{example3}}, {{example4}}, {{example5}}, {{example6}}, {{example7}} (Default if no unit is specified: {{default}})"
},
"prom-query-field": {
"placeholder-enter-a-prom-ql-query": "Enter a PromQL query…"
},
"prom-variable-query-editor": {
"aria-label-classic-query": "Classic Query",
"aria-label-metric-regex": "Metric regex",
"aria-label-metric-selector": "Metric selector",
"aria-label-prometheus-query": "Prometheus Query",
"aria-label-query-type": "Query type",
"aria-label-series-query": "Series Query",
"label-classic-query": "Classic Query",
"label-label": "Label",
"label-metric-regex": "Metric regex",
"label-query": "Query",
"label-query-type": "Query type",
"label-series-query": "Series Query",
"placeholder-classic-query": "Classic Query",
"placeholder-metric-regex": "Metric regex",
"placeholder-prometheus-query": "Prometheus Query",
"placeholder-select-query-type": "Select query type",
"placeholder-series-query": "Series Query",
"returns-metrics-matching-specified-metric-regex": "Returns a list of metrics matching the specified metric regex.",
"tooltip-classic-query": "The original implemetation of the Prometheus variable query editor. Enter a string with the correct query type and parameters as described in these docs. For example, {{exampleQuery}}.",
"tooltip-label": "Returns a list of label values for the label name in all metrics unless the metric is specified.",
"tooltip-metric-regex": "Returns a list of label names, optionally filtering by specified metric regex.",
"tooltip-query": "Returns a list of Prometheus query results for the query. This can include Prometheus functions, i.e.{{exampleQuery}}.",
"tooltip-query-type": "The Prometheus data source plugin provides the following query types for template variables.",
"tooltip-series-query": "Enter a metric with labels, only a metric or only labels, i.e.{{example1}}, {{example2}}, or {{example3}}. Returns a list of time series associated with the entered data."
},
"selector-actions": {
"aria-label-selector": "selector",
"aria-label-selector-clear-button": "Selector clear button",
"aria-label-use-selector-as-metrics-button": "Use selector as metrics button",
"aria-label-use-selector-for-query-button": "Use selector for query button",
"aria-label-validate-submit-button": "Validate submit button",
"clear": "Clear",
"resulting-selector": "4. Resulting selector",
"use-as-rate-query": "Use as rate query",
"use-query": "Use query",
"validate-selector": "Validate selector"
},
"value-selector": {
"aria-label-filter-expression-for-label-values": "Filter expression for label values",
"aria-label-values-for": "Values for {{labelKey}}",
"description-search-field-values-across-selected-labels": "Use the search field to find values across selected labels.",
"select-multiple-values-for-your-labels": "3. Select (multiple) values for your labels"
}
},
"configuration": {
"alerting-settings-overhaul": {
"label-manage-alerts-via-alerting-ui": "Manage alerts via Alerting UI",
"title-alerting": "Alerting",
"tooltip-manage-alerts-via-alerting-ui": "Manage alert rules for this data source. To manage other alerting resources, add an Alertmanager data source."
},
"config-editor": {
"browser-access-mode-error": "Browser access mode in the Prometheus data source is no longer available. Switch to server access mode.",
"description-advanced-settings": "Additional settings are optional settings that can be configured for more control over your data source.",
"title-advanced-settings": "Advanced settings",
"title-error": "Error"
},
"data-source-http-settings-overhaul": {
"tooltip-browser-access-mode": "Your access method is <1>Browser</1>, this means the URL needs to be accessible from the browser.",
"tooltip-http-url": "Specify a complete HTTP URL (for example {{exampleURL}})",
"tooltip-server-access-mode": "Your access method is <1>Server</1>, this means the URL needs to be accessible from the grafana backend/server."
},
"docs-tip": {
"visit-docs-for-more-details-here": "Visit docs for more details here."
},
"exemplar-setting": {
"label-data-source": "Data source",
"label-internal-link": "Internal link",
"label-label-name": "Label name",
"label-remove-exemplar-link": "Remove exemplar link",
"label-url": "URL",
"label-url-label": "URL Label",
"placeholder-go-to-examplecom": "Go to example.com",
"placeholder-httpsexamplecomvalueraw": "https://example.com/${__value.raw}",
"placeholder-trace-id": "traceID",
"title-remove-exemplar-link": "Remove exemplar link",
"tooltip-data-source": "The data source the exemplar is going to navigate to.",
"tooltip-internal-link": "Enable this option if you have an internal link. When enabled, this reveals the data source selector. Select the backend tracing data store for your exemplar data.",
"tooltip-label-name": "The name of the field in the labels object that should be used to get the traceID.",
"tooltip-url": "The URL of the trace backend the user would go to see its trace",
"tooltip-url-label": "Use to override the button label on the exemplar traceID field."
},
"exemplars-settings": {
"add": "Add",
"no-exemplars-configurations": "No exemplars configurations",
"title-exemplars": "Exemplars"
},
"prom-settings": {
"aria-label-default-editor": "Default Editor (Code or Builder)",
"aria-label-prom-type-type": "{{promType}} type",
"aria-label-prometheus-type": "Prometheus type",
"aria-label-select-http-method": "Select HTTP method",
"label-cache-level": "Cache level",
"label-custom-query-parameters": "Custom query parameters",
"label-default-editor": "Default editor",
"label-disable-metrics-lookup": "Disable metrics lookup",
"label-disable-recording-rules-beta": "Disable recording rules (beta)",
"label-http-method": "HTTP method",
"label-incremental-querying-beta": "Incremental querying (beta)",
"label-metric-names-suggestion-limit": "Metric names suggestion limit",
"label-prom-type-version": "{{promType}} version",
"label-prometheus-type": "Prometheus type",
"label-query-overlap-window": "Query overlap window",
"label-query-timeout": "Query timeout",
"label-scrape-interval": "Scrape interval",
"label-use-series-endpoint": "Use series endpoint",
"more-info": "For more information on configuring prometheus type and version in data sources, see the <2>provisioning documentation</2>.",
"placeholder-example-maxsourceresolutionmtimeout": "Example: {{example}}",
"title-interval-behaviour": "Interval behaviour",
"title-other": "Other",
"title-performance": "Performance",
"title-query-editor": "Query editor",
"tooltip-cache-level": "Sets the browser caching level for editor queries. Higher cache settings are recommended for high cardinality data sources.",
"tooltip-custom-query-parameters": "Add custom parameters to the Prometheus query URL. For example {{example1}}, {{example2}}, {{example3}}, or{{example4}}. Multiple parameters should be concatenated together with {{concatenationChar}}.",
"tooltip-default-editor": "Set default editor option for all users of this data source.",
"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. ",
"tooltip-disable-recording-rules-beta": "This feature will disable recording rules. Turn this on to improve dashboard performance",
"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.",
"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.",
"tooltip-metric-names-suggestion-limit": "The maximum number of metric names that may appear as autocomplete suggestions in the query editor's Code mode.",
"tooltip-prom-type-version": "Use this to set the version of your {{promType}} instance if it is not automatically configured.",
"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.",
"tooltip-query-overlap-window": "Set a duration like {{example1}} or {{example2}} or {{example3}}. Default of {{default}}. This duration will be added to the duration of each incremental request.",
"tooltip-query-timeout": "Set the Prometheus query timeout.",
"tooltip-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}}.",
"tooltip-use-series-endpoint": "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."
}
},
"querybuilder": {
"additional-settings": {
"content-filter-metric-names-regex-search-using": "Filter metric names by regex search, using an additional call on the Prometheus API.",
"disable-text-wrap": "Disable text wrap"
},
"feedback-link": {
"give-feedback": "Give feedback",
"title-give-feedback": "The metrics explorer is new, please let us know how we can improve it"
},
"handle-function": {
"text": {
"query-parsing-is-ambiguous": "Query parsing is ambiguous."
"configuration": {
"alerting-settings-overhaul": {
"label-manage-alerts-via-alerting-ui": "Manage alerts via Alerting UI",
"title-alerting": "Alerting",
"tooltip-manage-alerts-via-alerting-ui": "Manage alert rules for this data source. To manage other alerting resources, add an Alertmanager data source."
},
"config-editor": {
"browser-access-mode-error": "Browser access mode in the Prometheus data source is no longer available. Switch to server access mode.",
"description-advanced-settings": "Additional settings are optional settings that can be configured for more control over your data source.",
"title-advanced-settings": "Advanced settings",
"title-error": "Error"
},
"data-source-http-settings-overhaul": {
"tooltip-browser-access-mode": "Your access method is <1>Browser</1>, this means the URL needs to be accessible from the browser.",
"tooltip-http-url": "Specify a complete HTTP URL (for example {{exampleURL}})",
"tooltip-server-access-mode": "Your access method is <1>Server</1>, this means the URL needs to be accessible from the grafana backend/server."
},
"docs-tip": {
"visit-docs-for-more-details-here": "Visit docs for more details here."
},
"exemplar-setting": {
"label-data-source": "Data source",
"label-internal-link": "Internal link",
"label-label-name": "Label name",
"label-remove-exemplar-link": "Remove exemplar link",
"label-url": "URL",
"label-url-label": "URL Label",
"placeholder-go-to-examplecom": "Go to example.com",
"placeholder-httpsexamplecomvalueraw": "https://example.com/${__value.raw}",
"placeholder-trace-id": "traceID",
"title-remove-exemplar-link": "Remove exemplar link",
"tooltip-data-source": "The data source the exemplar is going to navigate to.",
"tooltip-internal-link": "Enable this option if you have an internal link. When enabled, this reveals the data source selector. Select the backend tracing data store for your exemplar data.",
"tooltip-label-name": "The name of the field in the labels object that should be used to get the traceID.",
"tooltip-url": "The URL of the trace backend the user would go to see its trace",
"tooltip-url-label": "Use to override the button label on the exemplar traceID field."
},
"exemplars-settings": {
"add": "Add",
"no-exemplars-configurations": "No exemplars configurations",
"title-exemplars": "Exemplars"
},
"prom-settings": {
"aria-label-default-editor": "Default Editor (Code or Builder)",
"aria-label-prom-type-type": "{{promType}} type",
"aria-label-prometheus-type": "Prometheus type",
"aria-label-select-http-method": "Select HTTP method",
"label-cache-level": "Cache level",
"label-custom-query-parameters": "Custom query parameters",
"label-default-editor": "Default editor",
"label-disable-metrics-lookup": "Disable metrics lookup",
"label-disable-recording-rules-beta": "Disable recording rules (beta)",
"label-http-method": "HTTP method",
"label-incremental-querying-beta": "Incremental querying (beta)",
"label-metric-names-suggestion-limit": "Metric names suggestion limit",
"label-prom-type-version": "{{promType}} version",
"label-prometheus-type": "Prometheus type",
"label-query-overlap-window": "Query overlap window",
"label-query-timeout": "Query timeout",
"label-scrape-interval": "Scrape interval",
"label-use-series-endpoint": "Use series endpoint",
"more-info": "For more information on configuring prometheus type and version in data sources, see the <2>provisioning documentation</2>.",
"placeholder-example-maxsourceresolutionmtimeout": "Example: {{example}}",
"title-interval-behaviour": "Interval behaviour",
"title-other": "Other",
"title-performance": "Performance",
"title-query-editor": "Query editor",
"tooltip-cache-level": "Sets the browser caching level for editor queries. Higher cache settings are recommended for high cardinality data sources.",
"tooltip-custom-query-parameters": "Add custom parameters to the Prometheus query URL. For example {{example1}}, {{example2}}, {{example3}}, or{{example4}}. Multiple parameters should be concatenated together with {{concatenationChar}}.",
"tooltip-default-editor": "Set default editor option for all users of this data source.",
"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. ",
"tooltip-disable-recording-rules-beta": "This feature will disable recording rules. Turn this on to improve dashboard performance",
"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.",
"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.",
"tooltip-metric-names-suggestion-limit": "The maximum number of metric names that may appear as autocomplete suggestions in the query editor's Code mode.",
"tooltip-prom-type-version": "Use this to set the version of your {{promType}} instance if it is not automatically configured.",
"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.",
"tooltip-query-overlap-window": "Set a duration like {{example1}} or {{example2}} or {{example3}}. Default of {{default}}. This duration will be added to the duration of each incremental request.",
"tooltip-query-timeout": "Set the Prometheus query timeout.",
"tooltip-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}}.",
"tooltip-use-series-endpoint": "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."
}
},
"label-filter-item": {
"aria-label-remove": "Remove {{name}}",
"placeholder-select-label": "Select label",
"placeholder-select-value": "Select value"
},
"label-filters": {
"label-filters": "Label filters",
"label-label-filters": "Label filters",
"tooltip-label-filters": "Optional: used to filter the metric select for this query type."
},
"metric-combobox": {
"async-select": {
"aria-label-open-metrics-explorer": "Open metrics explorer",
"placeholder-select-metric": "Select metric",
"tooltip-open-metrics-explorer": "Open metrics explorer"
"querybuilder": {
"additional-settings": {
"content-filter-metric-names-regex-search-using": "Filter metric names by regex search, using an additional call on the Prometheus API.",
"disable-text-wrap": "Disable text wrap"
},
"label-metric": "Metric",
"tooltip-metric": "Optional: returns a list of label values for the label name in the specified metric."
},
"metrics-modal": {
"additional-settings": "Additional Settings",
"aria-label-additional-settings": "Additional settings",
"aria-label-browse-metrics": "Browse metrics",
"currently-selected": "Currently selected: {{selected}}",
"metrics-pre-filtered": "These metrics have been pre-filtered by labels chosen in the label filters.",
"placeholder-results-per-page": "results per page",
"results-amount_one": "Showing {{num}} of {{count}} result",
"results-amount_other": "Showing {{num}} of {{count}} results",
"results-per-page": "Results per page",
"title-metrics-explorer": "Metrics explorer"
},
"nested-query": {
"label": {
"ignoring": "Ignoring",
"on": "On"
"feedback-link": {
"give-feedback": "Give feedback",
"title-give-feedback": "The metrics explorer is new, please let us know how we can improve it"
},
"operator": "Operator",
"tooltip-remove-match": "Remove match",
"vector-matches": "Vector matches"
},
"operation-editor": {
"not-found": "Operation {{id}} not found",
"title-remove": "Remove {{name}}"
},
"operation-header": {
"placeholder-replace-with": "Replace with",
"title-click-to-view-alternative-operations": "Click to view alternative operations",
"title-remove-operation": "Remove operation"
},
"operation-info-button": {
"title-click-to-show-description": "Click to show description",
"title-remove-operation": "Remove operation"
},
"operation-list": {
"operations": "Operations",
"placeholder-search": "Search",
"title-add-operation": "Add operation"
},
"operation-param-editor": {
"title-add": "Add {{name}}",
"title-remove": "Remove {{name}}"
},
"prom-query-builder-options": {
"aria-label-lower-limit-parameter": "Set lower limit for the step parameter",
"aria-label-select-resolution": "Select resolution",
"label-exemplars": "Exemplars",
"label-format": "Format",
"label-min-step": "Min step",
"label-resolution": "Resolution",
"label-type": "Type",
"placeholder-auto": "auto",
"title-options": "Options",
"tooltip-min-step": "An additional lower limit for the step parameter of the Prometheus query and for the <2>{{interval}}</2> and <4>{{rateInterval}}</4> variables."
},
"prom-query-code-editor-autocomplete-info": {
"autocomplete-suggestions-limited": "Autocomplete suggestions limited",
"tooltip-autocomplete-suggestions-limited": "The number of metric names exceeds the autocomplete limit. Only the {{autocompleteLimit}}-most relevant metrics are displayed. You can adjust the threshold in the data source settings."
},
"prom-query-editor-selector": {
"kick-start-your-query": "Kick start your query",
"label-explain": "Explain",
"run-queries": "Run queries",
"title-parsing-error-switch-builder": "Parsing error: Switch to the builder mode?"
},
"prom-query-legend-editor": {
"label-legend": "Legend",
"placeholder-select-legend-mode": "Select legend mode",
"tooltip-legend": "Series name override or template. Ex. {{templateExample}} will be replaced with label value for {{labelName}}."
},
"query-builder-hints": {
"hint-details": "hint: {{hintDetails}}"
},
"query-editor-hints": {
"hint-details": "hint: {{hintDetails}}"
},
"query-pattern": {
"apply-query": "Apply query",
"aria-label-apply-query-starter-button": "apply query starter button",
"aria-label-back-button": "back button",
"aria-label-create-new-query-button": "create new query button",
"aria-label-raw-query": "{{patternName}} raw query",
"aria-label-use-this-query-button": "use this query button",
"back": "Back",
"create-new-query": "Create new query",
"use-this-query": "Use this query"
},
"query-patterns-modal": {
"aria-label-close-kick-start-your-query-modal": "close kick start your query modal",
"aria-label-kick-start-your-query-modal": "Kick start your query modal",
"aria-label-toggle-query-starter": "open and close {{patternType}} query starter card",
"close": "Close",
"description-kick-start-your-query": "Kick start your query by selecting one of these queries. You can then continue to complete your query.",
"label-toggle-query-starter": "{{patternType}} query starters",
"title-kick-start-your-query": "Kick start your query"
},
"raw-query": {
"aria-label-selector": "selector"
},
"results-table": {
"content-descriptive-type": "When creating a {{descriptiveType}}, Prometheus exposes multiple series with the type counter. ",
"description": "Description",
"name": "Name",
"select": "Select",
"type": "Type"
},
"update-function-args": {
"text": {
"query-parsing-is-ambiguous": "Query parsing is ambiguous."
"handle-function": {
"text": {
"query-parsing-is-ambiguous": "Query parsing is ambiguous."
}
},
"label-filter-item": {
"aria-label-remove": "Remove {{name}}",
"placeholder-select-label": "Select label",
"placeholder-select-value": "Select value"
},
"label-filters": {
"label-filters": "Label filters",
"label-label-filters": "Label filters",
"tooltip-label-filters": "Optional: used to filter the metric select for this query type."
},
"metric-combobox": {
"async-select": {
"aria-label-open-metrics-explorer": "Open metrics explorer",
"placeholder-select-metric": "Select metric",
"tooltip-open-metrics-explorer": "Open metrics explorer"
},
"label-metric": "Metric",
"tooltip-metric": "Optional: returns a list of label values for the label name in the specified metric."
},
"metrics-modal": {
"additional-settings": "Additional Settings",
"aria-label-additional-settings": "Additional settings",
"aria-label-browse-metrics": "Browse metrics",
"currently-selected": "Currently selected: {{selected}}",
"metrics-pre-filtered": "These metrics have been pre-filtered by labels chosen in the label filters.",
"placeholder-results-per-page": "results per page",
"results-amount_one": "Showing {{num}} of {{count}} results",
"results-amount_other": "Showing {{num}} of {{count}} results",
"results-per-page": "Results per page",
"title-metrics-explorer": "Metrics explorer"
},
"nested-query": {
"label": {
"ignoring": "Ignoring",
"on": "On"
},
"operator": "Operator",
"tooltip-remove-match": "Remove match",
"vector-matches": "Vector matches"
},
"operation-editor": {
"not-found": "Operation {{id}} not found",
"title-remove": "Remove {{name}}"
},
"operation-header": {
"placeholder-replace-with": "Replace with",
"title-click-to-view-alternative-operations": "Click to view alternative operations",
"title-remove-operation": "Remove operation"
},
"operation-info-button": {
"title-click-to-show-description": "Click to show description",
"title-remove-operation": "Remove operation"
},
"operation-list": {
"operations": "Operations",
"placeholder-search": "Search",
"title-add-operation": "Add operation"
},
"operation-param-editor": {
"title-add": "Add {{name}}",
"title-remove": "Remove {{name}}"
},
"prom-query-builder-options": {
"aria-label-lower-limit-parameter": "Set lower limit for the step parameter",
"aria-label-select-resolution": "Select resolution",
"label-exemplars": "Exemplars",
"label-format": "Format",
"label-min-step": "Min step",
"label-resolution": "Resolution",
"label-type": "Type",
"placeholder-auto": "auto",
"title-options": "Options",
"tooltip-min-step": "An additional lower limit for the step parameter of the Prometheus query and for the <2>{{interval}}</2> and <4>{{rateInterval}}</4> variables."
},
"prom-query-code-editor-autocomplete-info": {
"autocomplete-suggestions-limited": "Autocomplete suggestions limited",
"tooltip-autocomplete-suggestions-limited": "The number of metric names exceeds the autocomplete limit. Only the {{autocompleteLimit}}-most relevant metrics are displayed. You can adjust the threshold in the data source settings."
},
"prom-query-editor-selector": {
"kick-start-your-query": "Kick start your query",
"label-explain": "Explain",
"run-queries": "Run queries",
"title-parsing-error-switch-builder": "Parsing error: Switch to the builder mode?"
},
"prom-query-legend-editor": {
"label-legend": "Legend",
"placeholder-select-legend-mode": "Select legend mode",
"tooltip-legend": "Series name override or template. Ex. {{templateExample}} will be replaced with label value for {{labelName}}."
},
"query-builder-hints": {
"hint-details": "hint: {{hintDetails}}"
},
"query-editor-hints": {
"hint-details": "hint: {{hintDetails}}"
},
"query-pattern": {
"apply-query": "Apply query",
"aria-label-apply-query-starter-button": "apply query starter button",
"aria-label-back-button": "back button",
"aria-label-create-new-query-button": "create new query button",
"aria-label-raw-query": "{{patternName}} raw query",
"aria-label-use-this-query-button": "use this query button",
"back": "Back",
"create-new-query": "Create new query",
"use-this-query": "Use this query"
},
"query-patterns-modal": {
"aria-label-close-kick-start-your-query-modal": "close kick start your query modal",
"aria-label-kick-start-your-query-modal": "Kick start your query modal",
"aria-label-toggle-query-starter": "open and close {{patternType}} query starter card",
"close": "Close",
"description-kick-start-your-query": "Kick start your query by selecting one of these queries. You can then continue to complete your query.",
"label-toggle-query-starter": "{{patternType}} query starters",
"title-kick-start-your-query": "Kick start your query"
},
"raw-query": {
"aria-label-selector": "selector"
},
"results-table": {
"content-descriptive-type": "When creating a {{descriptiveType}}, Prometheus exposes multiple series with the type counter. ",
"description": "Description",
"name": "Name",
"select": "Select",
"type": "Type"
},
"update-function-args": {
"text": {
"query-parsing-is-ambiguous": "Query parsing is ambiguous."
}
}
}
}
@@ -32,9 +32,13 @@ export const QueryPattern = (props: Props) => {
<Card.Heading>{pattern.name}</Card.Heading>
<div className={styles.rawQueryContainer}>
<RawQuery
aria-label={t('querybuilder.query-pattern.aria-label-raw-query', '{{patternName}} raw query', {
patternName: pattern.name,
})}
aria-label={t(
'grafana-prometheus.querybuilder.query-pattern.aria-label-raw-query',
'{{patternName}} raw query',
{
patternName: pattern.name,
}
)}
query={promQueryModeller.renderQuery({
metric: '',
labels: [],
@@ -49,7 +53,10 @@ export const QueryPattern = (props: Props) => {
{selectedPatternName !== pattern.name ? (
<Button
size="sm"
aria-label={t('querybuilder.query-pattern.aria-label-use-this-query-button', 'use this query button')}
aria-label={t(
'grafana-prometheus.querybuilder.query-pattern.aria-label-use-this-query-button',
'use this query button'
)}
onClick={() => {
if (hasPreviousQuery) {
// If user has previous query, we need to confirm that they want to apply this query pattern
@@ -59,7 +66,7 @@ export const QueryPattern = (props: Props) => {
}
}}
>
<Trans i18nKey="querybuilder.query-pattern.use-this-query">Use this query</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.query-pattern.use-this-query">Use this query</Trans>
</Button>
) : (
<>
@@ -72,36 +79,36 @@ export const QueryPattern = (props: Props) => {
</div>
<Button
size="sm"
aria-label={t('querybuilder.query-pattern.aria-label-back-button', 'back button')}
aria-label={t('grafana-prometheus.querybuilder.query-pattern.aria-label-back-button', 'back button')}
fill="outline"
onClick={() => setSelectedPatternName(null)}
>
<Trans i18nKey="querybuilder.query-pattern.back">Back</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.query-pattern.back">Back</Trans>
</Button>
<Button
size="sm"
aria-label={t(
'querybuilder.query-pattern.aria-label-apply-query-starter-button',
'grafana-prometheus.querybuilder.query-pattern.aria-label-apply-query-starter-button',
'apply query starter button'
)}
onClick={() => {
onPatternSelect(pattern);
}}
>
<Trans i18nKey="querybuilder.query-pattern.apply-query">Apply query</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.query-pattern.apply-query">Apply query</Trans>
</Button>
{hasNewQueryOption && (
<Button
size="sm"
aria-label={t(
'querybuilder.query-pattern.aria-label-create-new-query-button',
'grafana-prometheus.querybuilder.query-pattern.aria-label-create-new-query-button',
'create new query button'
)}
onClick={() => {
onPatternSelect(pattern, true);
}}
>
<Trans i18nKey="querybuilder.query-pattern.create-new-query">Create new query</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.query-pattern.create-new-query">Create new query</Trans>
</Button>
)}
</>
@@ -78,15 +78,18 @@ export const QueryPatternsModal = (props: Props) => {
return (
<Modal
aria-label={t(
'querybuilder.query-patterns-modal.aria-label-kick-start-your-query-modal',
'grafana-prometheus.querybuilder.query-patterns-modal.aria-label-kick-start-your-query-modal',
'Kick start your query modal'
)}
isOpen={isOpen}
title={t('querybuilder.query-patterns-modal.title-kick-start-your-query', 'Kick start your query')}
title={t(
'grafana-prometheus.querybuilder.query-patterns-modal.title-kick-start-your-query',
'Kick start your query'
)}
onDismiss={onClose}
>
<div className={styles.spacing}>
<Trans i18nKey="querybuilder.query-patterns-modal.description-kick-start-your-query">
<Trans i18nKey="grafana-prometheus.querybuilder.query-patterns-modal.description-kick-start-your-query">
Kick start your query by selecting one of these queries. You can then continue to complete your query.
</Trans>
</div>
@@ -95,14 +98,18 @@ export const QueryPatternsModal = (props: Props) => {
return (
<Collapse
aria-label={t(
'querybuilder.query-patterns-modal.aria-label-toggle-query-starter',
'grafana-prometheus.querybuilder.query-patterns-modal.aria-label-toggle-query-starter',
'open and close {{patternType}} query starter card',
{ patternType }
)}
key={patternType}
label={t('querybuilder.query-patterns-modal.label-toggle-query-starter', '{{patternType}} query starters', {
patternType: capitalize(patternType),
})}
label={t(
'grafana-prometheus.querybuilder.query-patterns-modal.label-toggle-query-starter',
'{{patternType}} query starters',
{
patternType: capitalize(patternType),
}
)}
isOpen={isOpen}
collapsible={true}
onToggle={() => {
@@ -139,13 +146,13 @@ export const QueryPatternsModal = (props: Props) => {
})}
<Button
aria-label={t(
'querybuilder.query-patterns-modal.aria-label-close-kick-start-your-query-modal',
'grafana-prometheus.querybuilder.query-patterns-modal.aria-label-close-kick-start-your-query-modal',
'close kick start your query modal'
)}
variant="secondary"
onClick={onClose}
>
<Trans i18nKey="querybuilder.query-patterns-modal.close">Close</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.query-patterns-modal.close">Close</Trans>
</Button>
</Modal>
);
@@ -94,7 +94,7 @@ export function LabelFilterItem({
<InputGroup>
{/* Label name select, loads all values at once */}
<AsyncSelect
placeholder={t('querybuilder.label-filter-item.placeholder-select-label', 'Select label')}
placeholder={t('grafana-prometheus.querybuilder.label-filter-item.placeholder-select-label', 'Select label')}
data-testid={selectors.components.QueryBuilder.labelSelect}
inputId="prometheus-dimensions-filter-item-key"
width="auto"
@@ -151,7 +151,7 @@ export function LabelFilterItem({
{/* Label value async select: autocomplete calls prometheus API */}
<AsyncSelect
placeholder={t('querybuilder.label-filter-item.placeholder-select-value', 'Select value')}
placeholder={t('grafana-prometheus.querybuilder.label-filter-item.placeholder-select-value', 'Select value')}
data-testid={selectors.components.QueryBuilder.valueSelect}
inputId="prometheus-dimensions-filter-item-value"
width="auto"
@@ -203,7 +203,9 @@ export function LabelFilterItem({
invalid={invalidValue}
/>
<AccessoryButton
aria-label={t('querybuilder.label-filter-item.aria-label-remove', 'Remove {{name}}', { name: item.label })}
aria-label={t('grafana-prometheus.querybuilder.label-filter-item.aria-label-remove', 'Remove {{name}}', {
name: item.label,
})}
icon="times"
variant="secondary"
onClick={onDelete}
@@ -97,13 +97,13 @@ export function LabelFilters({
width={20}
tooltip={
<div>
<Trans i18nKey="querybuilder.label-filters.tooltip-label-filters">
<Trans i18nKey="grafana-prometheus.querybuilder.label-filters.tooltip-label-filters">
Optional: used to filter the metric select for this query type.
</Trans>
</div>
}
>
<Trans i18nKey="querybuilder.label-filters.label-filters">Label filters</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.label-filters.label-filters">Label filters</Trans>
</InlineLabel>
{editorList()}
</div>
@@ -111,7 +111,7 @@ export function LabelFilters({
) : (
<EditorFieldGroup>
<EditorField
label={t('querybuilder.label-filters.label-label-filters', 'Label filters')}
label={t('grafana-prometheus.querybuilder.label-filters.label-label-filters', 'Label filters')}
error={MISSING_LABEL_FILTER_ERROR_MESSAGE}
invalid={labelFilterRequired && !hasLabelFilter}
>
@@ -88,7 +88,10 @@ export function MetricCombobox({
return (
<InputGroup>
<Combobox
placeholder={t('querybuilder.metric-combobox.async-select.placeholder-select-metric', 'Select metric')}
placeholder={t(
'grafana-prometheus.querybuilder.metric-combobox.async-select.placeholder-select-metric',
'Select metric'
)}
width="auto"
minWidth={25}
options={loadOptions}
@@ -99,11 +102,11 @@ export function MetricCombobox({
/>
<Button
tooltip={t(
'querybuilder.metric-combobox.async-select.tooltip-open-metrics-explorer',
'grafana-prometheus.querybuilder.metric-combobox.async-select.tooltip-open-metrics-explorer',
'Open metrics explorer'
)}
aria-label={t(
'querybuilder.metric-combobox.async-select.aria-label-open-metrics-explorer',
'grafana-prometheus.querybuilder.metric-combobox.async-select.aria-label-open-metrics-explorer',
'Open metrics explorer'
)}
variant="secondary"
@@ -132,11 +135,11 @@ export function MetricCombobox({
{variableEditor ? (
<InlineFieldRow>
<InlineField
label={t('querybuilder.metric-combobox.label-metric', 'Metric')}
label={t('grafana-prometheus.querybuilder.metric-combobox.label-metric', 'Metric')}
labelWidth={20}
tooltip={
<div>
<Trans i18nKey="querybuilder.metric-combobox.tooltip-metric">
<Trans i18nKey="grafana-prometheus.querybuilder.metric-combobox.tooltip-metric">
Optional: returns a list of label values for the label name in the specified metric.
</Trans>
</div>
@@ -147,7 +150,9 @@ export function MetricCombobox({
</InlineFieldRow>
) : (
<EditorFieldGroup>
<EditorField label={t('querybuilder.metric-combobox.label-metric', 'Metric')}>{asyncSelect()}</EditorField>
<EditorField label={t('grafana-prometheus.querybuilder.metric-combobox.label-metric', 'Metric')}>
{asyncSelect()}
</EditorField>
</EditorFieldGroup>
)}
</>
@@ -31,7 +31,7 @@ export const NestedQuery = memo<NestedQueryProps>((props) => {
<div className={styles.card}>
<div className={styles.header}>
<div className={styles.name}>
<Trans i18nKey="querybuilder.nested-query.operator">Operator</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.nested-query.operator">Operator</Trans>
</div>
<Select
width="auto"
@@ -45,7 +45,7 @@ export const NestedQuery = memo<NestedQueryProps>((props) => {
}}
/>
<div className={styles.name}>
<Trans i18nKey="querybuilder.nested-query.vector-matches">Vector matches</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.nested-query.vector-matches">Vector matches</Trans>
</div>
<div className={styles.vectorMatchWrapper}>
<Select<PromVisualQueryBinary['vectorMatchesType']>
@@ -53,8 +53,11 @@ export const NestedQuery = memo<NestedQueryProps>((props) => {
value={nestedQuery.vectorMatchesType || 'on'}
allowCustomValue
options={[
{ value: 'on', label: t('querybuilder.nested-query.label.on', 'On') },
{ value: 'ignoring', label: t('querybuilder.nested-query.label.ignoring', 'Ignoring') },
{ value: 'on', label: t('grafana-prometheus.querybuilder.nested-query.label.on', 'On') },
{
value: 'ignoring',
label: t('grafana-prometheus.querybuilder.nested-query.label.ignoring', 'Ignoring'),
},
]}
onChange={(val) => {
onChange(index, {
@@ -81,7 +84,7 @@ export const NestedQuery = memo<NestedQueryProps>((props) => {
name="times"
size="sm"
onClick={() => onRemove(index)}
tooltip={t('querybuilder.nested-query.tooltip-remove-match', 'Remove match')}
tooltip={t('grafana-prometheus.querybuilder.nested-query.tooltip-remove-match', 'Remove match')}
/>
</div>
<div className={styles.body}>
@@ -80,7 +80,7 @@ export const PromQueryBuilderOptions = React.memo<PromQueryBuilderOptionsProps>(
<EditorRow>
<div data-testid={selectors.components.DataSource.Prometheus.queryEditor.options}>
<QueryOptionGroup
title={t('querybuilder.prom-query-builder-options.title-options', 'Options')}
title={t('grafana-prometheus.querybuilder.prom-query-builder-options.title-options', 'Options')}
collapsedInfo={getCollapsedInfo(query, formatOption.label!, queryTypeLabel, app)}
>
<PromQueryLegendEditor
@@ -89,11 +89,11 @@ export const PromQueryBuilderOptions = React.memo<PromQueryBuilderOptionsProps>(
onRunQuery={onRunQuery}
/>
<EditorField
label={t('querybuilder.prom-query-builder-options.label-min-step', 'Min step')}
label={t('grafana-prometheus.querybuilder.prom-query-builder-options.label-min-step', 'Min step')}
tooltip={
<>
<Trans
i18nKey="querybuilder.prom-query-builder-options.tooltip-min-step"
i18nKey="grafana-prometheus.querybuilder.prom-query-builder-options.tooltip-min-step"
values={{
interval: '$__interval',
rateInterval: '$__rate_interval',
@@ -108,17 +108,17 @@ export const PromQueryBuilderOptions = React.memo<PromQueryBuilderOptionsProps>(
<AutoSizeInput
type="text"
aria-label={t(
'querybuilder.prom-query-builder-options.aria-label-lower-limit-parameter',
'grafana-prometheus.querybuilder.prom-query-builder-options.aria-label-lower-limit-parameter',
'Set lower limit for the step parameter'
)}
placeholder={t('querybuilder.prom-query-builder-options.placeholder-auto', 'auto')}
placeholder={t('grafana-prometheus.querybuilder.prom-query-builder-options.placeholder-auto', 'auto')}
minWidth={10}
onCommitChange={onChangeStep}
defaultValue={query.interval}
data-test-id="prometheus-step"
/>
</EditorField>
<EditorField label={t('querybuilder.prom-query-builder-options.label-format', 'Format')}>
<EditorField label={t('grafana-prometheus.querybuilder.prom-query-builder-options.label-format', 'Format')}>
<Select
data-testid={selectors.components.DataSource.Prometheus.queryEditor.format}
value={formatOption}
@@ -128,13 +128,15 @@ export const PromQueryBuilderOptions = React.memo<PromQueryBuilderOptionsProps>(
/>
</EditorField>
<EditorField
label={t('querybuilder.prom-query-builder-options.label-type', 'Type')}
label={t('grafana-prometheus.querybuilder.prom-query-builder-options.label-type', 'Type')}
data-testid={selectors.components.DataSource.Prometheus.queryEditor.type}
>
<RadioButtonGroup options={queryTypeOptions} value={queryTypeValue} onChange={onQueryTypeChange} />
</EditorField>
{shouldShowExemplarSwitch(query, app) && (
<EditorField label={t('querybuilder.prom-query-builder-options.label-exemplars', 'Exemplars')}>
<EditorField
label={t('grafana-prometheus.querybuilder.prom-query-builder-options.label-exemplars', 'Exemplars')}
>
<EditorSwitch
value={query.exemplar || false}
onChange={onExemplarChange}
@@ -143,10 +145,12 @@ export const PromQueryBuilderOptions = React.memo<PromQueryBuilderOptionsProps>(
</EditorField>
)}
{query.intervalFactor && query.intervalFactor > 1 && (
<EditorField label={t('querybuilder.prom-query-builder-options.label-resolution', 'Resolution')}>
<EditorField
label={t('grafana-prometheus.querybuilder.prom-query-builder-options.label-resolution', 'Resolution')}
>
<Select
aria-label={t(
'querybuilder.prom-query-builder-options.aria-label-select-resolution',
'grafana-prometheus.querybuilder.prom-query-builder-options.aria-label-select-resolution',
'Select resolution'
)}
isSearchable={false}
@@ -58,14 +58,14 @@ export function PromQueryCodeEditorAutocompleteInfo(props: Readonly<Props>) {
<div data-testid={selectors.components.DataSource.Prometheus.queryEditor.code.metricsCountInfo}>
<Stack direction="row" gap={1}>
<Text color="secondary" element="p" italic={true}>
<Trans i18nKey="querybuilder.prom-query-code-editor-autocomplete-info.autocomplete-suggestions-limited">
<Trans i18nKey="grafana-prometheus.querybuilder.prom-query-code-editor-autocomplete-info.autocomplete-suggestions-limited">
Autocomplete suggestions limited
</Trans>
</Text>
<IconButton
name="info-circle"
tooltip={t(
'querybuilder.prom-query-code-editor-autocomplete-info.tooltip-autocomplete-suggestions-limited',
'grafana-prometheus.querybuilder.prom-query-code-editor-autocomplete-info.tooltip-autocomplete-suggestions-limited',
'The number of metric names exceeds the autocomplete limit. Only the {{autocompleteLimit}}-most relevant metrics are displayed. You can adjust the threshold in the data source settings.',
{ autocompleteLimit }
)}
@@ -95,7 +95,7 @@ export const PromQueryEditorSelector = memo<Props>((props) => {
<ConfirmModal
isOpen={parseModalOpen}
title={t(
'querybuilder.prom-query-editor-selector.title-parsing-error-switch-builder',
'grafana-prometheus.querybuilder.prom-query-editor-selector.title-parsing-error-switch-builder',
'Parsing error: Switch to the builder mode?'
)}
body="There is a syntax error, or the query structure cannot be visualized when switching to the builder mode. Parts of the query may be lost. "
@@ -122,11 +122,13 @@ export const PromQueryEditorSelector = memo<Props>((props) => {
size="sm"
onClick={handleOpenQueryPatternsModal}
>
<Trans i18nKey="querybuilder.prom-query-editor-selector.kick-start-your-query">Kick start your query</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.prom-query-editor-selector.kick-start-your-query">
Kick start your query
</Trans>
</Button>
<div data-testid={selectors.components.DataSource.Prometheus.queryEditor.explain}>
<QueryHeaderSwitch
label={t('querybuilder.prom-query-editor-selector.label-explain', 'Explain')}
label={t('grafana-prometheus.querybuilder.prom-query-editor-selector.label-explain', 'Explain')}
value={explain}
onChange={onShowExplainChange}
/>
@@ -140,7 +142,7 @@ export const PromQueryEditorSelector = memo<Props>((props) => {
icon={data?.state === LoadingState.Loading ? 'spinner' : undefined}
disabled={data?.state === LoadingState.Loading}
>
<Trans i18nKey="querybuilder.prom-query-editor-selector.run-queries">Run queries</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.prom-query-editor-selector.run-queries">Run queries</Trans>
</Button>
)}
<PromQueryCodeEditorAutocompleteInfo datasourceUid={props.datasource.uid} editorMode={editorMode} />
@@ -67,9 +67,9 @@ export const PromQueryLegendEditor = React.memo<PromQueryLegendEditorProps>(
return (
<EditorField
label={t('querybuilder.prom-query-legend-editor.label-legend', 'Legend')}
label={t('grafana-prometheus.querybuilder.prom-query-legend-editor.label-legend', 'Legend')}
tooltip={t(
'querybuilder.prom-query-legend-editor.tooltip-legend',
'grafana-prometheus.querybuilder.prom-query-legend-editor.tooltip-legend',
'Series name override or template. Ex. {{templateExample}} will be replaced with label value for {{labelName}}.',
{ templateExample: '{{hostname}}', labelName: 'hostname' }
)}
@@ -92,7 +92,7 @@ export const PromQueryLegendEditor = React.memo<PromQueryLegendEditorProps>(
inputId="legend.mode"
isSearchable={false}
placeholder={t(
'querybuilder.prom-query-legend-editor.placeholder-select-legend-mode',
'grafana-prometheus.querybuilder.prom-query-legend-editor.placeholder-select-legend-mode',
'Select legend mode'
)}
options={legendModeOptions}
@@ -38,7 +38,9 @@ export function AdditionalSettings(props: AdditionalSettingsProps) {
<div className={styles.selectItem}>
<Switch value={state.disableTextWrap} onChange={() => onChangeDisableTextWrap()} />
<div className={styles.selectItemLabel}>
<Trans i18nKey="querybuilder.additional-settings.disable-text-wrap">Disable text wrap</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.additional-settings.disable-text-wrap">
Disable text wrap
</Trans>
</div>
</div>
<div className={styles.selectItem}>
@@ -50,7 +52,7 @@ export function AdditionalSettings(props: AdditionalSettingsProps) {
<div className={styles.selectItemLabel}>{placeholders.setUseBackend}&nbsp;</div>
<Tooltip
content={t(
'querybuilder.additional-settings.content-filter-metric-names-regex-search-using',
'grafana-prometheus.querybuilder.additional-settings.content-filter-metric-names-regex-search-using',
'Filter metric names by regex search, using an additional call on the Prometheus API.'
)}
placement="bottom-end"
@@ -18,14 +18,14 @@ export function FeedbackLink({ feedbackUrl }: Props) {
href={feedbackUrl}
className={styles.link}
title={t(
'querybuilder.feedback-link.title-give-feedback',
'grafana-prometheus.querybuilder.feedback-link.title-give-feedback',
'The metrics explorer is new, please let us know how we can improve it'
)}
target="_blank"
rel="noreferrer noopener"
>
<Icon name="comment-alt-message" />{' '}
<Trans i18nKey="querybuilder.feedback-link.give-feedback">Give feedback</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.feedback-link.give-feedback">Give feedback</Trans>
</a>
</Stack>
);
@@ -176,9 +176,9 @@ export const MetricsModal = (props: MetricsModalProps) => {
<Modal
data-testid={metricsModaltestIds.metricModal}
isOpen={isOpen}
title={t('querybuilder.metrics-modal.title-metrics-explorer', 'Metrics explorer')}
title={t('grafana-prometheus.querybuilder.metrics-modal.title-metrics-explorer', 'Metrics explorer')}
onDismiss={onClose}
aria-label={t('querybuilder.metrics-modal.aria-label-browse-metrics', 'Browse metrics')}
aria-label={t('grafana-prometheus.querybuilder.metrics-modal.aria-label-browse-metrics', 'Browse metrics')}
className={styles.modal}
>
<FeedbackLink feedbackUrl="https://forms.gle/DEMAJHoAMpe3e54CA" />
@@ -216,7 +216,10 @@ export const MetricsModal = (props: MetricsModalProps) => {
</div>
<div className={styles.inputItem}>
<Toggletip
aria-label={t('querybuilder.metrics-modal.aria-label-additional-settings', 'Additional settings')}
aria-label={t(
'grafana-prometheus.querybuilder.metrics-modal.aria-label-additional-settings',
'Additional settings'
)}
content={additionalSettings}
placement="bottom-end"
closeButton={false}
@@ -229,7 +232,9 @@ export const MetricsModal = (props: MetricsModalProps) => {
data-testid={metricsModaltestIds.showAdditionalSettings}
className={styles.noBorder}
>
<Trans i18nKey="querybuilder.metrics-modal.additional-settings">Additional Settings</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.metrics-modal.additional-settings">
Additional Settings
</Trans>
</Button>
<Button
className={styles.noBorder}
@@ -243,7 +248,10 @@ export const MetricsModal = (props: MetricsModalProps) => {
<div className={styles.resultsData}>
{query.metric && (
<i className={styles.currentlySelected}>
<Trans i18nKey="querybuilder.metrics-modal.currently-selected" values={{ selected: query.metric }}>
<Trans
i18nKey="grafana-prometheus.querybuilder.metrics-modal.currently-selected"
values={{ selected: query.metric }}
>
Currently selected: {'{{selected}}'}
</Trans>
</i>
@@ -253,7 +261,7 @@ export const MetricsModal = (props: MetricsModalProps) => {
<Icon name="info-circle" size="sm" />
<div className={styles.resultsDataFilteredText}>
&nbsp;
<Trans i18nKey="querybuilder.metrics-modal.metrics-pre-filtered">
<Trans i18nKey="grafana-prometheus.querybuilder.metrics-modal.metrics-pre-filtered">
These metrics have been pre-filtered by labels chosen in the label filters.
</Trans>
</div>
@@ -275,7 +283,7 @@ export const MetricsModal = (props: MetricsModalProps) => {
<div className={styles.resultsFooter}>
<div className={styles.resultsAmount}>
<Trans
i18nKey="querybuilder.metrics-modal.results-amount"
i18nKey="grafana-prometheus.querybuilder.metrics-modal.results-amount"
values={{ num: state.filteredMetricCount }}
count={state.totalMetricCount}
>
@@ -292,12 +300,15 @@ export const MetricsModal = (props: MetricsModalProps) => {
/>
<div className={styles.resultsPerPageWrapper}>
<p className={styles.resultsPerPageLabel}>
<Trans i18nKey="querybuilder.metrics-modal.results-per-page">Results per page</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.metrics-modal.results-per-page">Results per page</Trans>
</p>
<Input
data-testid={metricsModaltestIds.resultsPerPage}
value={calculateResultsPerPage(state.resultsPerPage, DEFAULT_RESULTS_PER_PAGE, MAXIMUM_RESULTS_PER_PAGE)}
placeholder={t('querybuilder.metrics-modal.placeholder-results-per-page', 'results per page')}
placeholder={t(
'grafana-prometheus.querybuilder.metrics-modal.placeholder-results-per-page',
'results per page'
)}
width={10}
title={'The maximum results per page is ' + MAXIMUM_RESULTS_PER_PAGE}
type="number"
@@ -70,7 +70,7 @@ export function ResultsTable(props: ResultsTableProps) {
<Tooltip
content={
<>
<Trans i18nKey="querybuilder.results-table.content-descriptive-type">
<Trans i18nKey="grafana-prometheus.querybuilder.results-table.content-descriptive-type">
When creating a {{ descriptiveType }}, Prometheus exposes multiple series with the type counter.{' '}
</Trans>
{docsTip(link)}
@@ -144,15 +144,15 @@ export function ResultsTable(props: ResultsTableProps) {
<thead className={styles.stickyHeader}>
<tr>
<th className={`${styles.nameWidth} ${styles.tableHeaderPadding}`}>
<Trans i18nKey="querybuilder.results-table.name">Name</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.results-table.name">Name</Trans>
</th>
{state.hasMetadata && (
<>
<th className={`${styles.typeWidth} ${styles.tableHeaderPadding}`}>
<Trans i18nKey="querybuilder.results-table.type">Type</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.results-table.type">Type</Trans>
</th>
<th className={`${styles.descriptionWidth} ${styles.tableHeaderPadding}`}>
<Trans i18nKey="querybuilder.results-table.description">Description</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.results-table.description">Description</Trans>
</th>
</>
)}
@@ -181,7 +181,7 @@ export function ResultsTable(props: ResultsTableProps) {
onClick={() => selectMetric(metric)}
className={styles.centerButton}
>
<Trans i18nKey="querybuilder.results-table.select">Select</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.results-table.select">Select</Trans>
</Button>
</td>
</tr>
@@ -227,7 +227,10 @@ function handleFunction(expr: string, node: SyntaxNode, context: Context) {
// Visual query builder doesn't support nested queries and so info function.
if (funcName === 'info') {
context.errors.push({
text: t('querybuilder.handle-function.text.query-parsing-is-ambiguous', 'Query parsing is ambiguous.'),
text: t(
'grafana-prometheus.querybuilder.handle-function.text.query-parsing-is-ambiguous',
'Query parsing is ambiguous.'
),
from: node.from,
to: node.to,
});
@@ -331,7 +334,10 @@ function updateFunctionArgs(expr: string, node: SyntaxNode | null, context: Cont
if (binaryExpressionWithinFunctionArgs) {
context.errors.push({
text: t('querybuilder.update-function-args.text.query-parsing-is-ambiguous', 'Query parsing is ambiguous.'),
text: t(
'grafana-prometheus.querybuilder.update-function-args.text.query-parsing-is-ambiguous',
'Query parsing is ambiguous.'
),
from: binaryExpressionWithinFunctionArgs.from,
to: binaryExpressionWithinFunctionArgs.to,
});
@@ -54,7 +54,7 @@ export function OperationEditor({
if (!def) {
return (
<span>
<Trans i18nKey="querybuilder.operation-editor.not-found" values={{ id: operation.id }}>
<Trans i18nKey="grafana-prometheus.querybuilder.operation-editor.not-found" values={{ id: operation.id }}>
Operation {'{{id}}'} not found
</Trans>
</span>
@@ -119,7 +119,9 @@ export function OperationEditor({
fill="text"
icon="times"
variant="secondary"
title={t('querybuilder.operation-editor.title-remove', 'Remove {{name}}', { name: paramDef.name })}
title={t('grafana-prometheus.querybuilder.operation-editor.title-remove', 'Remove {{name}}', {
name: paramDef.name,
})}
onClick={() => onRemoveRestParam(paramIndex)}
/>
)}
@@ -56,7 +56,7 @@ export const OperationHeader = memo<Props>(
fill="text"
variant="secondary"
title={t(
'querybuilder.operation-header.title-click-to-view-alternative-operations',
'grafana-prometheus.querybuilder.operation-header.title-click-to-view-alternative-operations',
'Click to view alternative operations'
)}
/>
@@ -67,7 +67,7 @@ export const OperationHeader = memo<Props>(
onClick={() => onRemove(index)}
fill="text"
variant="secondary"
title={t('querybuilder.operation-header.title-remove-operation', 'Remove operation')}
title={t('grafana-prometheus.querybuilder.operation-header.title-remove-operation', 'Remove operation')}
/>
</div>
</>
@@ -77,7 +77,10 @@ export const OperationHeader = memo<Props>(
<Select
autoFocus
openMenuOnFocus
placeholder={t('querybuilder.operation-header.placeholder-replace-with', 'Replace with')}
placeholder={t(
'grafana-prometheus.querybuilder.operation-header.placeholder-replace-with',
'Replace with'
)}
options={state.alternatives}
isOpen={true}
onCloseMenu={onToggleSwitcher}
@@ -56,7 +56,10 @@ export const OperationInfoButton = memo<Props>(({ def, operation }) => {
return (
<>
<Button
title={t('querybuilder.operation-info-button.title-click-to-show-description', 'Click to show description')}
title={t(
'grafana-prometheus.querybuilder.operation-info-button.title-click-to-show-description',
'Click to show description'
)}
ref={refs.setReference}
icon="info-circle"
size="sm"
@@ -75,7 +78,10 @@ export const OperationInfoButton = memo<Props>(({ def, operation }) => {
onClick={() => setShow(false)}
fill="text"
variant="secondary"
title={t('querybuilder.operation-info-button.title-remove-operation', 'Remove operation')}
title={t(
'grafana-prometheus.querybuilder.operation-info-button.title-remove-operation',
'Remove operation'
)}
/>
</div>
<div
@@ -127,16 +127,16 @@ export function OperationList<T extends QueryWithOperations>({
autoFocus={true}
alwaysOpen={true}
hideActiveLevelLabel={true}
placeholder={t('querybuilder.operation-list.placeholder-search', 'Search')}
placeholder={t('grafana-prometheus.querybuilder.operation-list.placeholder-search', 'Search')}
/>
) : (
<Button
icon={'plus'}
variant={'secondary'}
onClick={() => setCascaderOpen(true)}
title={t('querybuilder.operation-list.title-add-operation', 'Add operation')}
title={t('grafana-prometheus.querybuilder.operation-list.title-add-operation', 'Add operation')}
>
<Trans i18nKey="querybuilder.operation-list.operations">Operations</Trans>
<Trans i18nKey="grafana-prometheus.querybuilder.operation-list.operations">Operations</Trans>
</Button>
)}
</div>
@@ -135,7 +135,9 @@ function SelectInputParamEditor({
<Button
size="sm"
variant="secondary"
title={t('querybuilder.operation-param-editor.title-add', 'Add {{name}}', { name: paramDef.name })}
title={t('grafana-prometheus.querybuilder.operation-param-editor.title-add', 'Add {{name}}', {
name: paramDef.name,
})}
icon="plus"
onClick={() => onChange(index, selectOptions[0].value)}
>
@@ -163,7 +165,9 @@ function SelectInputParamEditor({
fill="text"
icon="times"
variant="secondary"
title={t('querybuilder.operation-param-editor.title-remove', 'Remove {{name}}', { name: paramDef.name })}
title={t('grafana-prometheus.querybuilder.operation-param-editor.title-remove', 'Remove {{name}}', {
name: paramDef.name,
})}
onClick={() => onChange(index, '')}
/>
)}
@@ -64,7 +64,7 @@ export const QueryBuilderHints = ({
className={styles.hint}
>
<Trans
i18nKey="querybuilder.query-builder-hints.hint-details"
i18nKey="grafana-prometheus.querybuilder.query-builder-hints.hint-details"
values={{ hintDetails: hint.fix?.title || hint.fix?.action?.type.toLowerCase().replace('_', ' ') }}
>
hint: {'{{hintDetails}}'}
@@ -29,7 +29,7 @@ export function QueryEditorHints(props: PromQueryEditorProps) {
<Tooltip content={`${hint.label} ${hint.fix?.label}`} key={hint.type}>
<Button onClick={() => onHintButtonClick(hint, props)} fill="outline" size="sm" className={styles.hint}>
<Trans
i18nKey="querybuilder.query-editor-hints.hint-details"
i18nKey="grafana-prometheus.querybuilder.query-editor-hints.hint-details"
values={{ hintDetails: hint.fix?.title || hint.fix?.action?.type.toLowerCase().replace('_', ' ') }}
>
hint: {'{{hintDetails}}'}
@@ -23,7 +23,7 @@ export function RawQuery({ query, lang, className }: Props) {
return (
<div
className={cx(styles.editorField, 'prism-syntax-highlight', className)}
aria-label={t('querybuilder.raw-query.aria-label-selector', 'selector')}
aria-label={t('grafana-prometheus.querybuilder.raw-query.aria-label-selector', 'selector')}
dangerouslySetInnerHTML={{ __html: highlighted }}
/>
);