diff --git a/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md b/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md index e7bb180363e..c07d9f8c0b7 100644 --- a/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md +++ b/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md @@ -128,6 +128,7 @@ Experimental features might be changed or removed without prior notice. | `grafanaAPIServer` | Enable Kubernetes API Server for Grafana resources | | `featureToggleAdminPage` | Enable admin page for managing feature toggles from the Grafana front-end | | `awsAsyncQueryCaching` | Enable caching for async queries for Redshift and Athena. Requires that the `useCachingService` feature toggle is enabled and the datasource has caching and async query support enabled | +| `prometheusConfigOverhaulAuth` | Update the Prometheus configuration page with the new auth component | ## Development feature toggles diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts index 449ebfd07b3..f6663c3c0c8 100644 --- a/packages/grafana-data/src/types/featureToggles.gen.ts +++ b/packages/grafana-data/src/types/featureToggles.gen.ts @@ -116,4 +116,5 @@ export interface FeatureToggles { awsAsyncQueryCaching?: boolean; splitScopes?: boolean; azureMonitorDataplane?: boolean; + prometheusConfigOverhaulAuth?: boolean; } diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go index feca32609ff..1eb1cfb8af6 100644 --- a/pkg/services/featuremgmt/registry.go +++ b/pkg/services/featuremgmt/registry.go @@ -675,5 +675,11 @@ var ( Owner: grafanaPartnerPluginsSquad, Expression: "true", // on by default }, + { + Name: "prometheusConfigOverhaulAuth", + Description: "Update the Prometheus configuration page with the new auth component", + Stage: FeatureStageExperimental, + Owner: grafanaObservabilityMetricsSquad, + }, } ) diff --git a/pkg/services/featuremgmt/toggles_gen.csv b/pkg/services/featuremgmt/toggles_gen.csv index 7d16a0c55c6..c8423b7e8df 100644 --- a/pkg/services/featuremgmt/toggles_gen.csv +++ b/pkg/services/featuremgmt/toggles_gen.csv @@ -97,3 +97,4 @@ featureToggleAdminPage,experimental,@grafana/grafana-operator-experience-squad,f awsAsyncQueryCaching,experimental,@grafana/aws-datasources,false,false,false,false splitScopes,preview,@grafana/grafana-authnz-team,false,false,true,false azureMonitorDataplane,GA,@grafana/partner-datasources,false,false,false,false +prometheusConfigOverhaulAuth,experimental,@grafana/observability-metrics,false,false,false,false diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go index 14adb86c21c..a4abf9854ba 100644 --- a/pkg/services/featuremgmt/toggles_gen.go +++ b/pkg/services/featuremgmt/toggles_gen.go @@ -398,4 +398,8 @@ const ( // FlagAzureMonitorDataplane // Adds dataplane compliant frame metadata in the Azure Monitor datasource FlagAzureMonitorDataplane = "azureMonitorDataplane" + + // FlagPrometheusConfigOverhaulAuth + // Update the Prometheus configuration page with the new auth component + FlagPrometheusConfigOverhaulAuth = "prometheusConfigOverhaulAuth" ) diff --git a/public/app/plugins/datasource/prometheus/configuration/AlertingSettingsOverhaul.tsx b/public/app/plugins/datasource/prometheus/configuration/AlertingSettingsOverhaul.tsx index 9c94522bcb5..dc8243d9163 100644 --- a/public/app/plugins/datasource/prometheus/configuration/AlertingSettingsOverhaul.tsx +++ b/public/app/plugins/datasource/prometheus/configuration/AlertingSettingsOverhaul.tsx @@ -1,6 +1,9 @@ +import { cx } from '@emotion/css'; import React from 'react'; import { DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data'; +import { ConfigSubSection } from '@grafana/experimental'; +import { config } from '@grafana/runtime'; import { InlineField, Switch, useTheme2 } from '@grafana/ui'; import { docsTip, overhaulStyles } from './ConfigEditor'; @@ -19,9 +22,13 @@ export function AlertingSettingsOverhaul({ const theme = useTheme2(); const styles = overhaulStyles(theme); + const prometheusConfigOverhaulAuth = config.featureToggles.prometheusConfigOverhaulAuth; + return ( - <> -

Alerting

+
@@ -51,6 +58,6 @@ export function AlertingSettingsOverhaul({
- + ); } diff --git a/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx b/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx index cc9cc37665f..e5d69ef348f 100644 --- a/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx +++ b/public/app/plugins/datasource/prometheus/configuration/AzureAuthSettings.tsx @@ -1,3 +1,4 @@ +import { cx } from '@emotion/css'; import React, { FormEvent, useMemo, useState } from 'react'; import { config } from '@grafana/runtime'; @@ -40,6 +41,10 @@ export const AzureAuthSettings = (props: HttpSettingsBaseProps) => { } }; + const prometheusConfigOverhaulAuth = config.featureToggles.prometheusConfigOverhaulAuth; + + const labelWidth = prometheusConfigOverhaulAuth ? 24 : 26; + return ( <>
Azure authentication
@@ -53,15 +58,15 @@ export const AzureAuthSettings = (props: HttpSettingsBaseProps) => {
Azure configuration
- + {overrideAudienceChecked && ( - + diff --git a/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx b/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx index daa1fb3cf31..18154fdbebc 100644 --- a/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx +++ b/public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.tsx @@ -1,6 +1,8 @@ +import { cx } from '@emotion/css'; import React, { ChangeEvent, useEffect, useReducer, useState } from 'react'; import { SelectableValue } from '@grafana/data'; +import { config } from '@grafana/runtime'; import { InlineFormLabel, Button } from '@grafana/ui/src/components'; import { Input } from '@grafana/ui/src/components/Forms/Legacy/Input/Input'; import { Select } from '@grafana/ui/src/components/Forms/Legacy/Select/Select'; @@ -148,6 +150,7 @@ export const AzureCredentialsForm = (props: Props) => { onCredentialsChange(updated); } }; + const prometheusConfigOverhaulAuth = config.featureToggles.prometheusConfigOverhaulAuth; return (
@@ -190,7 +193,7 @@ export const AzureCredentialsForm = (props: Props) => { Directory (tenant) ID
{ Application (client) ID
{ Client Secret - +
{!disabled && (
-
+
@@ -237,7 +249,7 @@ export const AzureCredentialsForm = (props: Props) => { Client Secret
{
Default Subscription -
+
updateValidDuration({ ...validDuration, timeInterval: e.currentTarget.value })} + /> + {validateInput(validDuration.timeInterval, DURATION_REGEX, durationError)} - } - interactive={true} - disabled={options.readOnly} - > - <> - updateValidDuration({ ...validDuration, timeInterval: e.currentTarget.value })} - /> - {validateInput(validDuration.timeInterval, DURATION_REGEX, durationError)} - - + +
+
+ {/* Query Timeout */} +
+
+ Set the Prometheus query timeout. {docsTip()}} + interactive={true} + disabled={options.readOnly} + > + <> + updateValidDuration({ ...validDuration, queryTimeout: e.currentTarget.value })} + /> + {validateInput(validDuration.queryTimeout, DURATION_REGEX, durationError)} + + +
- {/* Query Timeout */} -
+ + + +
Set the Prometheus query timeout. {docsTip()}} - interactive={true} - disabled={options.readOnly} - > - <> - updateValidDuration({ ...validDuration, queryTimeout: e.currentTarget.value })} - /> - {validateInput(validDuration.queryTimeout, DURATION_REGEX, durationError)} - - -
-
-
- -

Query editor

-
-
- Set default editor option for all users of this data source. {docsTip()}} - interactive={true} - disabled={options.readOnly} - > - o.value === options.jsonData.prometheusType)} - onChange={onChangeHandler( - 'prometheusType', - { - ...options, - jsonData: { ...options.jsonData, prometheusVersion: undefined }, - }, - (options) => { - // Check buildinfo api and set default version if we can - setPrometheusVersion(options, onOptionsChange, onUpdate); - return onOptionsChange({ - ...options, - jsonData: { ...options.jsonData, prometheusVersion: undefined }, - }); - } - )} + aria-label={`Default Editor (Code or Builder)`} + options={editorOptions} + value={ + editorOptions.find((o) => o.value === options.jsonData.defaultEditor) ?? + editorOptions.find((o) => o.value === QueryEditorMode.Builder) + } + onChange={onChangeHandler('defaultEditor', options, onOptionsChange)} width={40} />
+
+ + Checking this option will disable the metrics chooser and metric/label support in the query + field's autocomplete. This helps if you have performance issues with bigger Prometheus instances.{' '} + {docsTip()} + + } + interactive={true} + disabled={options.readOnly} + className={styles.switchField} + > + + +
-
- {options.jsonData.prometheusType && ( + + + + {!options.jsonData.prometheusType && !options.jsonData.prometheusVersion && options.readOnly && ( +
+ For more information on configuring prometheus type and version in data sources, see the{' '} + + provisioning documentation + + . +
+ )} +
+
- Use this to set the version of your {options.jsonData.prometheusType} instance if it is not - automatically configured. {docsTip()} + Set this to the type of your prometheus database, e.g. Prometheus, Cortex, Mimir or Thanos. Changing + this field will save your current settings, and attempt to detect the version. Certain types of + Prometheus support or do not support various APIs. For example, some types support regex matching + for label queries to improve performance. Some types have an API for metadata. If you set this + incorrectly you may experience odd behavior when querying metrics and labels. Please check your + Prometheus documentation to ensure you enter the correct type. {docsTip()} } interactive={true} disabled={options.readOnly} > o.value === options.jsonData.prometheusVersion + )} + onChange={onChangeHandler('prometheusVersion', options, onOptionsChange)} + width={40} + /> + +
+ )} +
+ {config.featureToggles.prometheusResourceBrowserCache && ( +
+
+ + Sets the browser caching level for editor queries. Higher cache settings are recommended for high + cardinality data sources. + + } + interactive={true} + disabled={options.readOnly} + > + o.value === options.jsonData.cacheLevel) ?? PrometheusCacheLevel.Low - } + <> + + updateValidDuration({ ...validDuration, incrementalQueryOverlapWindow: e.currentTarget.value }) + } + className="width-20" + value={options.jsonData.incrementalQueryOverlapWindow ?? defaultPrometheusQueryOverlapWindow} + onChange={onChangeHandler('incrementalQueryOverlapWindow', options, onOptionsChange)} + spellCheck={false} + /> + {validateInput(validDuration.incrementalQueryOverlapWindow, MULTIPLE_DURATION_REGEX, durationError)} + + + )} +
+ +
+
+ This feature will disable recording rules Turn this on to improve dashboard performance} + interactive={true} + className={styles.switchField} + disabled={options.readOnly} + > +
- )} - -
-
- - This feature will change the default behavior of relative queries to always request fresh data from - the prometheus instance, instead query results will be cached, and only new records are requested. - Turn this on to decrease database and network load. - - } - interactive={true} - className={styles.switchField} - disabled={options.readOnly} - > - - -
+ -
- {options.jsonData.incrementalQuerying && ( - - Set a duration like 10m or 120s or 0s. Default of 10 minutes. This duration will be added to the - duration of each incremental request. - - } - interactive={true} - disabled={options.readOnly} - > - <> + +
+
+
+ + Add custom parameters to the Prometheus query URL. For example timeout, partial_response, dedup, or + max_source_resolution. Multiple parameters should be concatenated together with an ‘&’. {docsTip()} + + } + interactive={true} + disabled={options.readOnly} + > - updateValidDuration({ ...validDuration, incrementalQueryOverlapWindow: e.currentTarget.value }) - } - className="width-25" - value={options.jsonData.incrementalQueryOverlapWindow ?? defaultPrometheusQueryOverlapWindow} - onChange={onChangeHandler('incrementalQueryOverlapWindow', options, onOptionsChange)} + className="width-20" + value={options.jsonData.customQueryParameters} + onChange={onChangeHandler('customQueryParameters', options, onOptionsChange)} spellCheck={false} + placeholder="Example: max_source_resolution=5m&timeout=10" /> - {validateInput(validDuration.incrementalQueryOverlapWindow, MULTIPLE_DURATION_REGEX, durationError)} - - - )} + +
+
+
+ {/* HTTP Method */} +
+ + You can use either POST or GET HTTP method to query your Prometheus data source. POST is the + recommended method as it allows bigger queries. Change this to GET if you have a Prometheus version + older than 2.1 or if POST requests are restricted in your network. {docsTip()} + + } + interactive={true} + label="HTTP method" + disabled={options.readOnly} + > + - -
-
-
- {/* HTTP Method */} -
- - You can use either POST or GET HTTP method to query your Prometheus data source. POST is the - recommended method as it allows bigger queries. Change this to GET if you have a Prometheus version - older than 2.1 or if POST requests are restricted in your network. {docsTip()} - - } - interactive={true} - label="HTTP method" - disabled={options.readOnly} - > - + + + + ); +}; diff --git a/public/app/plugins/datasource/prometheus/configuration/overhaul/ConnectionSettings.tsx b/public/app/plugins/datasource/prometheus/configuration/overhaul/ConnectionSettings.tsx new file mode 100644 index 00000000000..8167b97ae3f --- /dev/null +++ b/public/app/plugins/datasource/prometheus/configuration/overhaul/ConnectionSettings.tsx @@ -0,0 +1,90 @@ +import { css, cx } from '@emotion/css'; +import React, { ReactNode } from 'react'; + +import { DataSourceJsonData, DataSourceSettings } from '@grafana/data'; +import { ConfigSection } from '@grafana/experimental'; +import { InlineField, Input, PopoverContent } from '@grafana/ui'; + +import { PromOptions } from '../../types'; +// THIS FILE IS COPIED FROM GRAFANA/EXPERIMENTAL +// BECAUSE IT CONTAINS TYPES THAT ARE REQUIRED IN THE ADVANCEDHTTPSETTINGS COMPONENT +// THE TYPES ARE WRITTEN IN EXPERIMENTAL WHERE THEY ARE NOT AS STRICT +// @ts-ignore +export type Config = DataSourceSettings< + // @ts-ignore + JSONData, + // @ts-ignore + SecureJSONData +>; +// @ts-ignore +export type OnChangeHandler = (options: DataSourceSettings) => void; +// @ts-ignore +export type Props = { + config: C; + onChange: OnChangeHandler; + description?: ReactNode; + urlPlaceholder?: string; + urlTooltip?: PopoverContent; + urlLabel?: string; + className?: string; +}; +// @ts-ignore +export const ConnectionSettings: (props: Props) => JSX.Element = ({ + config, + onChange, + description, + urlPlaceholder, + urlTooltip, + urlLabel, + className, +}) => { + const isValidUrl = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/.test( + config.url + ); + + const styles = { + container: css({ + maxWidth: 578, + }), + }; + + return ( + <> + + + Specify a complete HTTP URL +
+ (for example https://example.com:8080) + + ) + } + grow + disabled={config.readOnly} + required + invalid={!isValidUrl && !config.readOnly} + error={isValidUrl ? '' : 'Please enter a valid URL'} + interactive + > + + onChange({ + ...config, + url: event.currentTarget.value, + }) + } + value={config.url || ''} + placeholder={urlPlaceholder || 'URL'} + /> + + + + ); +}; diff --git a/public/app/plugins/datasource/prometheus/configuration/overhaul/types.ts b/public/app/plugins/datasource/prometheus/configuration/overhaul/types.ts new file mode 100644 index 00000000000..5edb4da623c --- /dev/null +++ b/public/app/plugins/datasource/prometheus/configuration/overhaul/types.ts @@ -0,0 +1,11 @@ +import { ReactElement } from 'react'; + +// these are not available yet in grafana +export type CustomMethodId = `custom-${string}`; + +export type CustomMethod = { + id: CustomMethodId; + label: string; + description: string; + component: ReactElement; +}; diff --git a/public/app/plugins/datasource/prometheus/types.ts b/public/app/plugins/datasource/prometheus/types.ts index df895ce838f..f74d9a6a7bf 100644 --- a/public/app/plugins/datasource/prometheus/types.ts +++ b/public/app/plugins/datasource/prometheus/types.ts @@ -45,6 +45,7 @@ export interface PromOptions extends DataSourceJsonData { incrementalQuerying?: boolean; incrementalQueryOverlapWindow?: string; disableRecordingRules?: boolean; + sigV4Auth?: boolean; } export type ExemplarTraceIdDestination = {